<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* { padding:0; margin:0;}
body { width:400px; height:400px; border:1px solid black; }
#outer { width:300px; height:200px; background:red;}
#main { width:100px; height:100px; background:blue; margin-top:10px;}
</style>
<script>
</script>
</head>
<body>
<div id="outer">
<div id="main"></div>
</div>
</body>
</html>
很简单的代码,给#main增加了margin-top:10px;来把它往下移动10px。但是打开网页一看,发现并不简单……
可以看见不止是蓝色背景的div往下移动10px,而是蓝色背景的div跟着父元素一起往下移动10px;这是为什么呢?百思不得其解,只好查阅资料。
W3Cschool中找到相关的解释:外边距合并,当2个垂直外边距相遇时,他们将形成一个外边距。合并之后的外边距的高度等于2个发生合并的外边距的高度中的较大值。
外边距合并的条件
- 当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。
- 当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并。
- 当一个空元素没有边框或填充时,上下外边距碰到了一起,也会发生合并。
接下来验证margin-bottom是否也存在合并的问题:给蓝色背景设置:height:200px; margin-bottom:10px;
使得下外边距重叠并且向上移动10px;
可以明显看出蓝色背景div并没有移动,说明我们的想法是正确;那么要怎么解决呢?
避免外边距合并
- 给父元素添加padding-top来替代margin-top但是有时这种效果并不是我们想要的;
- 给父元素添加样式:overflow:hidden;
- 给父元素添加border。如果不想要border显示的话,可以设置border:1px solid transprent;这样边框就是隐藏起来。
- 将其设为浮动元素或绝对定位。