css - 4px 的额外空间无处不在

Question

我有一个 UL，在那个 UL 里面我有一个图像，我在 css 中将其设置为 200 像素宽。但是，当它在网页上呈现时，图像右侧会多出 4px。 Chrome 的 inspect 元素显示，出于某种原因，UL 本身是 204px。我可以通过将 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

display:inline-block 添加 4px 的额外空间有问题

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