4px的额外空间来自无处

Question

我有一个UL和UL内部我有一个图像，我在css中设置为200px宽。但是，当它在网页上呈现时，图像右侧会有额外的4px。 Chrome的检查元素显示，由于某种原因，UL本身是204px。我可以通过将UL设置为宽度：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;
}

用铬合金拍摄的照片（你可以看到图片右边的额外4px）

Answer 1

display：inline-block在添加4px的额外空间方面存在问题

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>