margin的合併屬性（外邊距重疊）

一、先看兩個問題：

1. 現在我們有兩個塊級元素垂直排列，A元素的margin-bottom為100px，B元素的margin-top為50px；
   請問這兩個元素的距離是多少？
   直覺上我們認為應該是100px+50px=150px
   但實際情況卻是這樣的：
   
   A與B的實際距離只有100px！
   這是因為margin屬性會自動將垂直的兩個margin距離合並，合併後的距離為兩個元素中margin距離較大的那個。
2. 有一個父元素和一個子元素：

	<style type="text/css">
		.parent{
			margin-top: 0px;
			width: 200px;
			height: 200px;
			background-color: #008000;
		}
		.children{
			margin-top: 50px;
			width: 100px;
			height: 100px;
			background-color: #FF7F50;
		}
	</style>

	<div class="parent">
		<div class="children"></div>
	</div>
 

你可能以為會是這樣：

但實際情況是這樣：

可以看到子元素的margin出現在了父元素上面，父塊元素和其內後代塊元素外邊界重疊，重疊部分最終會溢位到父級塊元素外面。

解決方法：

1. 這種狀況發生在margin屬性上，那麼可以用其他的屬性代替，比如padding；
2. 相鄰的兩個元素之間的外邊距重疊，後一個元素加上clear-fix清除浮動；
3. 父子元素之間，為父塊元素設定：border、padding、高度height等；
4. 在兩個重疊的元素間加上一個偽元素隔開；

參考資料：

MDN Web Docs