圆角BOX为什么要加PADDING?

澳洲123
  • 25

我有一段简单的代码可以实现一个圆角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;}

效果对比图
pic.png

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

PS,谢谢各位的回答:)

回复
阅读 6.2k
5 个回答
丁文森
  • 787
为什么加了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是必须的。

NMTuan
  • 134

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

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

就这样..

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

我不知道你说的什么效果,但那个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;
}
徐小冰
  • 1
新手上路,请多包涵

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

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

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

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

宣传栏