刪除圖像之間的空間

Question

image我有一個圖像塊，但他們沒有連接到另一個，我需要刪除空間，並使他們看起來附加。我曾嘗試以下但不工作

img { 
border: 0 none; 
box-shadow: none; 
padding:0px; 
float: left; 
display:block; 
float:left; 
line-height:0; 
} 

這是我的HTML

<div class="col-xs-4 col-md-3 "> 
      <div class="hovereffect"> 
      <img src="images/plasma.jpg" alt="Plasma" id="space"> 
      <div class="overlay"> 
      <h3> 
      <a href="#" class="link">Creativity on Combined Photos</a> 
      </h3> 
      <p> 
       <a href="#" class="link">LINK HERE</a> 
      </p> 
     </div> 
     </div> 
     </div> 

請參閱圖像問題出在哪裏。

Answer 1

.test{ 
 
    display:flex 
 
}

<div class="test"> 
 
      <div class="hovereffect"> 
 
       <img src="http://placehold.it/350x150"> 
 
      <div class="overlay"> 
 
      <h3> 
 
      <a href="#" class="link">Creativity on Combined Photos</a> 
 
      </h3> 
 
      <p> 
 
       <a href="#" class="link">LINK HERE</a> 
 
      </p> 
 
     </div> 
 
     </div> 
 
     <div class="hovereffect"> 
 
       <img src="http://placehold.it/350x150"> 
 
      <div class="overlay"> 
 
      <h3> 
 
      <a href="#" class="link">Creativity on Combined Photos</a> 
 
      </h3> 
 
      <p> 
 
       <a href="#" class="link">LINK HERE</a> 
 
      </p> 
 
     </div> 
 
     </div> 
 
     </div>

是這樣的你正在尋找？

我用flexbox做到了這一點，您只需給出圖像的父級顯示：flex;

，如果你不想讓他們一個挨着對方你能做到這樣

.test{ 
 
    display:flex; 
 
    flex-direction:column 
 
} 
 
.hovereffect{ 
 
    display:flex; 
 
}

<div class="test"> 
 
      <div class="hovereffect"> 
 
       <img src="http://placehold.it/350x150"> 
 
      <div class="overlay"> 
 
      <h3> 
 
      <a href="#" class="link">Creativity on Combined Photos</a> 
 
      </h3> 
 
      <p> 
 
       <a href="#" class="link">LINK HERE</a> 
 
      </p> 
 
     </div> 
 
     </div> 
 
     <div class="hovereffect"> 
 
       <img src="http://placehold.it/350x150"> 
 
      <div class="overlay"> 
 
      <h3> 
 
      <a href="#" class="link">Creativity on Combined Photos</a> 
 
      </h3> 
 
      <p> 
 
       <a href="#" class="link">LINK HERE</a> 
 
      </p> 
 
     </div> 
 
     </div> 
 
     </div>

Answer 2

請試試這個：

img { 
border: 0 none; 
box-shadow: none; 
padding:0px; 
float: left; 
display:block; 
margin:0; 
line-height:0; 
}