0

我有这些 HTML\CSS 用于一个简单的圆框。它运作良好，但我不明白为什么要放置“padding-bottom：1px;” 对于“盒子”。我可以看到有这个填充和没有这个填充之间的区别。只是不明白为什么它会这样工作。在 Chrome 中，底部的空间明显超过 1px。

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

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

非常感谢~

4

2 回答 2

0

margin-bottom你的被<p>添加到padding你的box。所以你看不到 1 px 而是 1px + 10px 。

.box p  {margin-bottom:0}
于 2013-02-14T06:03:55.930 回答
0

填充避免边距折叠：

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

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

没有它，就像底部边距一样.box。

于 2013-02-14T17:13:42.743 回答