兩個div之間的意外間距

Question

爲什麼圖像和列表之間有間距？ http://jsfiddle.net/ZPQUP/3/ 另外如何使<li>元素佔用儘可能多的空間？所以我最後一個孩子沒有額外的空間？

Answer 1

製作圖像display: block;。

如果不需要支持IE6/7，將列表轉換爲帶有CSS的表格。

見http://jsfiddle.net/ZPQUP/9/

Answer 2

爲了讓列表項填補所有的 「UL」 你可以添加寬度：33％;到列表項：

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

Answer 3

這是因爲圖像表現爲行內元素。內聯元素在底部爲下垂，像j，g，q，p信件等

使用display: block;強制它像一個塊級元素的空間。

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