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)