首先先贴一段代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.box {
width: 300px;
height: 300px;
background-color: #d6d6d6;
}
.box1 {
width: 100px;
height: 100px;
border: 3px solid red;
background-color: green;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>
然后看下代码实现的效果，
可以看到，我们给子元素的margin-top并没有起到作用，并且作用在了父元素的身上，这是什么原因呢？下面我们来分析一下：
这是CSS 外边距合并的原因，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
- 也就是说当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
- 当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。
注释： 只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
那么怎么解决这个问题呢，笔者测试了几个方法，有如下5种解决方式：
- 修改父元素的高度，增加
padding-top样式模拟(padding-top:1px;常用)； - 为父元素添加overflow:hidden;样式即可；
- 为父元素或者子元素声明浮动（float:left;）;
- 为父元素添加border(border:1px solid transparent;)
- 为父元素或者子元素声明绝对定位；
