4px的额外空间来自无处

时间:2014-10-29 23:56:13

标签: css asp.net

我有一个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) Image

2 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:0)

假设你有这个标记:

<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>