解決：子div設定margin-top使得父div也跟著向下移動
阿新 • • 發佈：2018-12-27
之前在寫網頁的時候，發現一個小問題，就是子div設定margin-top的時候，父的div也會跟著向下移動。我用程式碼和圖描述一下問題：
<style>
*{margin:0;padding:0;}
.div1{background:green;height:100px;}
.div2{background:darkblue;height:100px;}
.subDiv{background:red;height:40px;}
</style>
<body>
<div class="div1"></div>
<div class="div2">
<div class="subDiv"></div>
</div>
</body> 效果是：
紅色div是藍色div的子div。然後我設定紅色div的margin-top為20px;
結果如下：
可以看到，設定margin-top之後，父div跟著子div向下移動了。（白色層為空白處，非div層）
解決這個問題的方法是，為父div設定border。為此，我為父div設定border-top:1px solid darkblue;
結果顯示：
可以看到，子div向下移動了，但是父div並沒有向下移動。
網上找到的原理：
一個盒子如果沒有上補白(padding-top)和上邊框(border-top)，那麼這個盒子的上邊距會和其內部文件流中的第一個子元素的上邊距重疊 。
雖然可以通過給父div新增border可以解決問題，但是總覺得不太好。每次為了實現這樣的效果而設定border-top，好像有點累贅。後來在網上看了一些博文，覺得很不錯。大概的意思是：margin是用於隔開兩個獨立元素，而padding用域隔開元素及其元素內部內容。其實子div相當於父div的內容，為了使元素和內容隔開，可以使用padding。
於是，我在父div裡面設定了padding-top,也達到了目的。
本文僅作為筆記記錄。
W3C的CSS教程：
http://www.w3school.com.cn/css/css_margin_collapsing.asp
網上相關博文：
http://www.hicss.net/do-not-tell-me-you-understand-margin/