Question

gist我有一块图像，但它们彼此没有连接，我需要移除这些空格并使它们看起来是附着的。我尝试了以下但不起作用

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

＆＃13;

.test{
  display:flex
}

＆＃13;

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

＆＃13;

你正在寻找这样的东西吗？

我使用flexbox执行此操作，您只需将图像的父级显示为：flex;

如果你不想让它们彼此相邻，你就可以这样做

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

请试试这个：

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

删除图像之间的空间

2 个答案: