當使用margin時，會出現兩個問題：
問題1、父子間的margin，會由子級傳遞到父級
問題2、兄弟間margin，會上下疊加
做一個簡單的實驗:
| Html |
Css |
|
|
|
| 效果
|
|
普通解決方法：
問題1、父子間的margin，會由子級傳遞到父級
解決方法: margin傳遞的產生的原因是父級的高度沒有被自動撐開，所以在父級父級增加屬性： overflow: auto 即可解決
問題2、兄弟間margin，會上下疊加
解決方法：瀏覽器為了保證列表的整齊，上下margin產生了疊加，不能直接解決。只能通過減少一個margin的方式。如只定義margin-top:100px; margin-bottom:0px。的方式解決。
不是很完美。
經過實驗，發現flex彈性魔盒可以完美解決問題。代碼如下：
| Html |
Css |
|
|
|
| 效果
|
|
