边距叠加

css排版时出现：里面的div设置margin-top值时外面div会向下移动相应距离的解决方法

　　先看一简单实例：
<div
id="box">
<p>这是一个段落</p>

</div>

然后设置样式

　　#box { margin:
10px; background-color: #999; }

　　p {
background-color: #990; margin: 20px; }

　　理论上在p段落和div之间会出现20px的空白边，因为已经设置p标签的margin样式但实际上没有。

这里有两种情况：首先，段落的20像素顶空白边和底空白边与div的10像素空白边叠加，形成一个单一的20像素垂直空白边。其次，这些空白边不是div包围，而是突出到div的顶部和底部的外边。出现这种情况是由于具有块级子元素的元素计算高度的方式造成的。

如果元素的没有垂直边框和填充，那么它的高度就是它包含的子元素的顶部和底部边框边缘之间的距离。

因此，包含的子元素的顶部和底部空白边就突出到容器元素的外边。但是，有一个简单的解决方案。通过添加一个垂直边框和填充，空白边就不再叠加了,而且元素的高度就是它包含的子元素的顶部和底部空白边边缘之间的距离。

在上面的例子中可以将box加一个padding：1px；样式；