子元素設置margin-top后，父元素跟隨下移的問題
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background: blue;
width: 200px;
height: 200px;
}
p{
background: red;
width: 50px;
height: 50px;
margin-top: 30px;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
div沒有margin-top:30px，但是頁面上顯示的結果確是像margin-top應用到了div上一般，div下移而p沒有。
原因是因為
當一個元素包含在另一個元素中時，假設沒有內邊距padding或邊框border把外邊距分隔開，它們的上和/或下外邊距也會發生合並。請看下圖
再說了白點就是：父元素的第一個子元素的上邊距margin-top如果碰不到有效的border或者padding.就會不斷一層一層的找自己“領導”(父元素，祖先元素)的麻煩。只要給領導設置個有效的 border或者padding就可以有效的管制這個目無領導的margin防止它越級，假傳聖旨，把自己的margin當領導的margin執行。
對於垂直外邊距合並的解決方案上面已經解釋了，為父元素增加一個border-top或者padding-top即可解決這個問題。（引用https://www.hicss.net/do-not-tell-me-you-understand-margin/這篇文章的話）
div{
background: blue;
width: 200px;
height: 200px;
border-top: 1px solid #ccc;//新增
}
