空白双边距是一个极容易误解的CSS特性.它不是CSS的bug,但如果我们一旦误解,将会给你带来很多麻烦.
先看如下demo代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>空白边距叠加demo@Mr.Think
<style>
body{width:300px; font-family:'微软雅黑'; font-size:1em; text-indent:10px; line-height:1.25}
div{background:#a40000;margin:10px}
div p{background:#eee;margin:15px}
</style>
</head>
<body>
<div><p>空白边距叠加demo@Mr.Think</p></div>
</body>
</html>
这是一个div元素内嵌套p的简单样例,先别复制保存为html测试,在你看完上面的代码后,你是否以为它出为你呈现如下图的效果?
好,现在你可以复制上面代码,保存到本地,然后在浏览器中打开.你会惊讶的发现,它呈现给你的效果是这样的:
为什么会这样呢?按CSS中,对于有块级子元素的元素计算高度的方式,如果元素没有垂直边框和填充,那其高度就是其子元素顶部和底部边框边缘之间的距离.故,子元素的顶部和底部空白边就突出到元素的外围了.p元素的15px外边距与div元素的10px的外边距形成一个单一的15px垂直空白边,另外,形式的这个空白边并非为div所包围,而是呈现在div的外围.所以,我们看到了第二张效果图.
如何解决?本人比较推荐两种解决方式:
其一,为外围元素定义透明边框.具体到本例,即在样式div中加入border:1px solid transparent;
其二,为外围元素定义内边距填充..具体到本例,即在样式div中加入padding:1px
另外,还可以通过外围元素绝对定位,或者定义子元素浮动等方式实现.
少了 </title>
[回复]
少了 ?
[回复]
No.14 回复:
六月 2nd, 2011 at 12:56
@No.14, 少了 <title>
[回复]
之前也遇到过这个问题。。误打误撞用padding:1px;这种方式解决了..但是不知道原理 现在了解了~
[回复]
嗯，遇到这个问题还觉得很奇怪，在用border调试的时候发现加边框可以解决，但是确实有这个边框颜色的问题~现在看到这篇文章，真是妙不可言呵呵~
[回复]
一个overflow:hidden;就解决的问题
空白边距叠加demo@Mr.Think
body{width:300px; font-family:’微软雅黑’; font-size:1em; text-indent:10px; line-height:1.25}
div{background:#a40000;margin:10px; overflow:hidden;}
div p{background:#eee;margin:15px}
空白边距叠加demo@Mr.Think
[回复]
Mr.Think 回复:
七月 27th, 2010 at 10:20
@wany, 这种方法不妥. 万恶的IE6是不支持的.
[回复]
我在外层的div里面加上zoom:1; overflow:hidden;，就可以了，理由我也不知道，也不知道这样加正常不。。。
[回复]
Mr.Think 回复:
七月 21st, 2010 at 20:11
@雨打浮萍, 可能是你未清除浮动的原因吧.zoom:1; overflow:hidden;是用来清除浮动的.
[回复]
在ie里面，为什么我这儿还有是有问题呢?上左右都正常了，但下边距还是没有恢复。
[回复]
平时都没注意这个细节，看到这篇文章，想想以前也遇到过类似的问题但不知道什么原因。
我试了下，用border:1px solid transparent这种方法，ie6下是有黑色1px边框存在的，不知道大家有没有这个问题。
[回复]
Mr.Think 回复:
七月 21st, 2010 at 13:39
@米雪儿, 对的.IE6是不支持border的transparent属性的.所以IE6下还是建议用padding方法解决.也可以谷歌一下IE6对transparent属性bug的解决方法,但都是比较繁琐的.
[回复]
其一,为外围元素定义透明边框.具体到本例,即在样式div中加入border:1px solid transprent;
transprent – transparent
[回复]
Mr.Think 回复:
七月 16th, 2010 at 12:32
@Aiseli, 感谢更正~笔误.
[回复]