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>