空白边叠加的问题
空白边叠加是另一个如果误解就会导致很多麻烦的css特殊性。下面我们来举个例子：
<div id="box">
<p>This paragraph has a 20px margin.</p>
</div>
div框设置了10像素的空白边
#box{
margin:10px;
background-color:#d5d5d5;
}
p
{
margin:20px;
background-color:#6699ff;
}
这样你理想中的应该是div外边距是10像素和p标签产生20像素的外边距，其实际上是，只有div的10像素外边距产生了，p标签只出现了左侧和右侧有了20像素的外边距，与div的顶部和底部并没有产生外边距。
这是两个原因造成的，首先，段落的20像素的顶部空白边和底部空白边与div的10像素重叠了，形成了一个单一的20像素垂直空白。其次，这些空白边不是 被div包围，而是突出到div的顶部和底部的外边。出现这种情况是由于子元素的元素计算其高度造成的。如果元素没有垂直边框或者填充，那么它的高度就是 它包含的子元素的顶部和底部边框边缘之间的距离。因此，包含的子元素的顶部和底部空白边就突出到容器元素的外边。但是，有一个简单的解决方法。通过添加一 个垂直边框或填充，空白边就不再叠加了，而且元素的高度就是它包含的子元素的顶部和底部空白边边缘之间的距离。代码如下：
#box{
margin:10px;
padding:1px;
background-color:#d5d5d5;
}
p
{
margin:20px;
background-color:#6699ff;
}
ok问题解决了，下一章我来讲bug捕捉的基本知识。
如有需要网站建设的朋友可以联系本站，本站的特色是
网页设计，本站免费提供网站模板。相互学习，是本站的特色。转载请注意原创本站地址：http://www.update8.com。
