4-9 特殊情況 · 前端筆記

## 1.給父元素的第一個子元素margin-top會出現的問題 ~~~ <style> .parent { width: 300px; height: 300px; background-color: red; } .child { width: 100px; height: 100px; background-color: yellow; margin-top: 100px; } </style> </head> <body> <div class="parent"> <div class="child"> </div> </div> ~~~ ![](https://box.kancloud.cn/b7dbc2fa894be237839f6e405c0bc405_313x406.png) - 解決方案 1.使用偽元素 ~~~ .parent:before{ content:""; display:table; } ~~~ 2.給父元素一個overflow：hidden ~~~ .parent { width: 300px; height: 300px; background-color: red; overflow:hidden; } ~~~ ## 2.兄弟元素margin重合問題 - 如果上元素的margin-bottom和下元素的margin-top一樣則距離重合，否則選擇更大的一方作為距離 ~~~ <style> .parent { width: 300px; height: 300px; background-color: red; margin-bottom: 100px; } .child { width: 300px; height: 300px; background-color: yellow; margin-top: 100px; } </style> </head> <body> <div class="parent"> </div> <div class="child"> </div> ~~~ ![](https://box.kancloud.cn/c655268505836f285cad716b30dfc071_176x396.png)