圖像得到5px額外，顯示：塊不工作

Question

爲什麼圖像之間會有一些額外的空白空間？他們不應該像粘在一起嗎？ jsfiddle：http://jsfiddle.net/VS4r7/ 我在這裏尋找其他答案，其中大多數人說，我只是要加display:block，但這對我不起作用。

Answer 1

如果你想擺脫元素之間的空白，改變你的DIV inline-block到table-cell

div { 
    height:100px; 
    width:100px; 
    display:table-cell; 
} 

Answer 2

當你任何一種行內元素裏面，在你的HTML源代碼空格被認爲是部分內聯內容，需要一定數量的像素。
現在，如果你只需要連續3張圖片，首先刪除包裝任何圖片的div，你不需要它。在此之後，你有兩個選擇：

1）來自股利和IMG刪除任何特定display指令，並寫入沒有空格的3個IMG標籤之間：例：

<img src="#" /><img src="#" /><img src="#" /> 

與CSS：

body { 
    margin:0; 
} 

img { 

    height:100px; 
    width:100px; 

} 

2）將img標籤視爲左浮動塊，因此您可以忽略空白問題。例如：

<img src="#" /> 
<img src="#" /> 
<img src="#" /> 

用CSS：

body { 
    margin:0; 
} 

img { 
    display:block; 
    height:100px; 
    width:100px; 
    float:left; 
} 

注：如果您使用的是家長的div內液浮塊，請記住，你可以有父div的大小問題，除非你後添加一個空的div imgs或在parent div上添加overflow:hidden css。