两个div之间的意外间距

Question

为什么图像和列表之间有间距？ http://jsfiddle.net/ZPQUP/3/ 另外，如何使<li>元素占用尽可能多的空间？所以我最后一个孩子没有多余的空间？

Answer 1

制作图片display: block;。

如果不需要支持IE6 / 7，则将列表转换为带有css的表。

请参阅http://jsfiddle.net/ZPQUP/9/

Answer 2

那是因为图像表现为内联元素。内联元素的底部有空格，用于挂起的字母，如j，g，q，p等。

使用display: block;强制它的行为类似于块级元素。

#profile-grid img {
    height: 250px;
    width: 332px;
    padding: 0;
    margin: 0;
    display: block;
}

Answer 3

为了使列表项填满所有“ul”，你可以添加宽度：33％;到列表项：

li.item {
    margin: 0px;
    display: inline;
    float: left;
    height: 50px;
    border-left: 1px solid #ddd;
    display: inline;
    width:33%;
}