html - float 缩略图

Question

我正在尝试创建一个响应式图片库，我的图片是响应式的，但我遇到了空白问题。

我已经给了元素 margin:0 和 padding:0 但我得到了不需要的白色空间，我不确定如何处理它。

HTML:

<ul class="thumbnail-view">
  <li class="thumbnail">
    <img src="http://placekitten.com/600/600" />
    <span class="overlay">
        testing
    </span>
  </li>
  <li class="thumbnail">
    <img src="http://placekitten.com/600/600" />
    <span class="overlay">
        testing
    </span>
  </li>
  <li class="thumbnail">
    <img src="http://placekitten.com/600/600" />
    <span class="overlay">
        testing
    </span>
  </li>
  <li class="thumbnail">
    <img src="http://placekitten.com/g/600/600" />
    <span class="overlay">
        testing
    </span>
  </li>
</ul>

CSS:

  body,html{
  margin:0;
}


.thumbnail-view{
width: 100%;
height: 100%;
position: absolute;
list-style: none;
padding: 0;
margin: 0;
}

.thumbnail{
width: 25%;
position: relative;
display: block;
float:left;
cursor: pointer;

img{ 
    width: 100%;
    height:100%;
}

.overlay{
    top: 15px;
    bottom: 15px;
    right: 15px;   
    left: 15px;
    position: absolute;
    z-index: 100;
    background-color: rgba(33, 177, 167, 0.7);
    opacity:0;
    -webkit-transition: opacity 0.6s;
    transition: opacity 0.6s;
    color:#fff;
}

&:hover .overlay{
    opacity:1;    
}

}

这是 jsfiddle http://jsfiddle.net/kmcbride/2b4yW/7/

Answer 1

图像是行内 block 元素，因此它们有空白。要删除它，您可以将 display:block; 添加到图像中。

FIDDLE