嵌套塊元素垂直外邊距的塌陷

 

---

1 案例演示

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .father {
        width: 100px;
        height: 100px;
        background-color: purple;
        margin-top: 10px;
    }
    .son {
        width: 50px;
        height: 50px;
        background-color: pink;
        margin-top: 20px;
    }
</style>

<div class="father">
    <div class="son"></div>
</div>

我以爲 

 實際上

---

2 嵌套塊元素垂直外邊距的塌陷

對於兩個嵌套關係（父子關係）的塊元素，父元素有上外邊距同時子元素也有上外邊距，此時父元素會塌陷較大的外邊距值

1. 可以爲父元素定義上邊框
2. 可以爲父元素定義上內邊距
3. 可以爲父元素添加 overflow: hidden;
4. 還有其他方法，比如浮動、固定，絕對定位的盒子不會有塌陷問題

<div class="father">
    <div class="son"></div>
</div>

* {margin: 0;padding: 0;}
.father {
	width: 100px;
	height: 100px;
	background-color: purple;
	margin-top: 10px;
	/*爲父元素定義上邊框*/
	/*border: 1px solid transparent;*/
	border-top: 1px solid transparent;
}
.son {width: 50px;height: 50px;background-color: pink;margin-top: 20px;}

* {margin: 0;padding: 0;}
.father {
	width: 100px;
	height: 100px;
	background-color: purple;
	margin-top: 10px;
	/*爲父元素定義上內邊距*/
	/*padding: 1px;*/
	padding-top: 1px;
}
.son {width: 50px;height: 50px;background-color: pink;margin-top: 20px;}

推薦（不需要額外的增加盒子的大小）

* {margin: 0;padding: 0;}
.father {
	width: 100px;
	height: 100px;
	background-color: purple;
	margin-top: 10px;
	/*爲父元素添加 overflow: hidden;*/
	overflow: hidden;
}
.son {width: 50px;height: 50px;background-color: pink;margin-top: 20px;}