css解决子div设置margin-top父div向下移动的方法

发布时间:2019-09-20编辑:脚本学堂
我们布局网页时,里面的div设置margin-top而外面的div向下移动一些距离,这是我们最不愿看到的局面,怎么解决呢?看下文中的实例你就会找到答案。

htmlmargin-top背景.一个简单实例:
 

复制代码 代码示例:
<div id="box">
<p>这是一个段落</p>
</div>

然后设置样式
 

复制代码 代码示例:
#box { margin: 10px; background-color: #999; }
p { background-color: #990; margin: 20px; }

理论上在p段落和div之间会出现20px的空白边,由于已经设置p标签的margin样式但实际上没有。
有两种情况:1,段落的20像素顶空白边和底空白边与div的10像素空白边叠加,形成一个单一的20像素垂直空白边。2,这些空白边不是div包围,而是突出到div的顶部和底部
的外边。出现这种情况是由于具有块级子元素的元素计算高度的方式造成的。

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

在上面的例子中可以将box加一个padding:1px;就可以解决了。是不是很简单呢?