4px的額外空間無處不在

Question

我有一個UL和內部的UL我有一個圖像，我已經在CSS中設置爲200px寬。但是，當它在網頁上呈現時，圖像右側會多出一個4像素。 Chrome的檢測元素顯示出於某種原因，UL本身是204像素。我可以通過將UL設置爲width：200px來解決此問題，但從長遠來看，這並不起作用，因爲我需要向圖像添加填充，如果我這樣做，圖像會被抵消。

這裏的所有相關的CSS：

#imagesUl { 
display:inline-block; 
border:1px solid rgba(85, 85, 85, 0.2); 
margin-left:40px; 
margin-top:20px; 
height:220px; 
} 
#imagesUl h1{ 
padding-top:0px; 
margin:0px; 
font-weight:bold; 
display:inline-block; 
color: #515050; 
} 
#imagesUl img { 
width:200px; 
padding:0px; 
} 

而且它在Chrome瀏覽器的圖片（你可以看到在圖片右側的額外4PX）

Answer 1

顯示：內聯塊具有一個問題，增加的額外空間4像素

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 2

假設你有這個標記：

<p><img src="img1.jpg" /> 
<img src="img2.jpg" /></p> 

你會期望看到這兩個圖像之間的差距，因爲它們之間有一個換行符。這被解釋爲水平的白色空間。您的<ul>元素也會發生同樣的情況。如果刪除它們之間的水平空白區域，問題將消失。

換句話說更改此：

<ul> 
    <li>...</li> 
</ul> 
<ul> 
    <li>...</li> 
</ul> 

這樣：

<ul> 
    <li>...</li> 
</ul><ul> 
    <li>...</li> 
</ul>