Question

我有一个简单的圆框的HTML \ CSS。它运作良好，但我不明白为什么把“填充底部：1px;”为“盒子”。我可以看到有这个填充和没有这个填充之间的差异。只是不明白它为什么会像这样工作。在Chrome中，底部的空间明显超过1px。

here是图片比较差异，here是代码

 <div class="box">
 <h2>Lorem Ipsum</h2>
 <p>Lorem ipsum dolor sit amet, sapien.</p>
 </div>




.box {width: 348px; 
      background: #FF9 url(images/bottom.png) no-repeat left bottom;
      padding-bottom: 1px;}
.box h2 {background: url(images/top.png) no-repeat left top;
         margin-top: 0;
         padding: 20px 20px 0 20px;}

非常感谢〜

Answer 1

margin-bottom的{{1}}已添加到<p>的{{1}}。所以你没有看到1像素而是1像素+ 10像素。

padding

Answer 2

填充可以避免边距崩溃：

http://www.w3.org/TR/CSS2/box.html#collapsing-margins

当且仅当没有填充[...]将它们分开时，两个边距相邻

没有它，就像下边距位于.box。

什么“填充底部：1px;”用于CSS圆角盒？

2 个答案: