删除图像之间的空间

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; 
}