首先先貼一段代碼
<!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;)
- 為父元素或者子元素聲明絕對定位；
