圆角BOX为什么要加PADDING?

Question

我有一段简单的代码可以实现一个圆角BOX的效果。但不明白为什么要给BOX的BOTTOM加一个像素的PADDING.
也想不通，为什么加了1个像素的PADDING后，为什么会产生那么大的间距（明显超过1个像素）。具体请看下图。

HTML代码

<div class="box">
  <h2>Lorem Ipsum</h2>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin venenatis turpis ut quam. In dolor. Nam ultrices nisl sollicitudin sapien. Ut lacinia aliquet ante.</p>
</div>

CSS代码

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

效果对比图

具体的代码也可以看这里http://blurfun.com/temp/round-box.htm...

PS,谢谢各位的回答：）

Answer 1

为什么加了1个像素的PADDING后，为什么会产生那么大的间距（明显超过1个像素）。

答案带有部分猜测成分～

这多出来的是因为这个box的高度发生了变化，多出来的高度是16px，16px正是下面的p一行所占的高度。Chrome的p自带属性

-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;

你给p加一个margin:0发现这个问题没有了。目测就是因为这个属性吧～没有看其他浏览器的样式，反正写样式前适当的rest是必须的。

Answer 2

p标签默认是有margin距离的.
而margin这货会叠加.有些浏览器解析不准.所以会有些兼容性的问题.

具体这个我没写代码测试.凭经验说.
如果box没有padding的话.就是p后面没东西了..p的这个margin-bottom就会跟box下面的元素产生距离.使得box元素没有被正确的撑开.
但如果box有padding.那p的margin-bottom就与box底边产生距离.就把box元素撑开了.

就这样..

ps.这个跟圆角木有关系.margin都有这问题

Answer 3

我不知道你说的什么效果，但那个padding-bottom:1px; 只是为了留1px给背景用，你看到的那个所谓的圆角div只是背景图top.gif和bottom.gif拼起来的而已。这段代码我是看不出有什么技术含量值得去研究。

css3是这样写的

.box{
 border:1px solid #CCC;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
}

Answer 4

楼上说的对，给p加一个margin:0的属性就哦了，这个就是为了让更多的浏览器都好用，因为好多标签都会有自己的margin、padding等，最好重置一下，再写自己的。

Answer 5

@NMTuan 童鞋说对了一部分，由于margin边距重叠的原因，导致p标签底部的margin没有作用在.box元素里，边缘属性padding或者border能够取消重叠

由于手头没有IE系的浏览器，所以不好做测试。不过据@张鑫旭 同学所说，这种做法在IE系的浏览器下表现比较糟糕，不知道是否如此

相关连接：http://www.zhangxinxu.com/study/20090...