之前在寫網頁的時候，發現一個小問題，就是子div設置margin-top的時候，父的div也會跟着向下移動。我用代碼和圖描述一下問題：
- <span style="font-size:14px;"><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></span>
效果是：
紅色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,也達到了目的