html - 删除图像之间的空间

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 做了这个，你只需要给图像的父级 display: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>