父子边距重合

转载于 2023-01-16 22:20:33 发布 · 230 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://www.nowcoder.com/issue/tutorial?tutorialId=96&uuid=cd5cb37ff49943699b0636bf53b4c7fd

文章标签：

#前端 #css

当块元素的margin与子元素的margin无间隔时，会发生外边距塌陷，导致边界重叠。这种情况可以通过在父元素上设置`overflow:hidden`创建BFC来解决，防止外边距塌陷。

边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。

父子元素的边界重叠

<style>
        .parent{
            background-color: black;
            height: 110px;
        }
        .child{
            background-color: aqua;
            height: 100px;
            margin-top: 10px;
            
        }
    </style>
<section class="parent">
  <article class="child"></article>
</section>

<link href="common.css" rel="stylesheet"/>

想要达到的样式：

实际的样式：

产生原因：

是如果块元素的margin-top与它的第一个子元素的margin-top之间没有border、padding、inlinecontent、clearance来分隔，或者块元素的 margin-bottom 与它的最后一个子元素的 margin-bottom 之间没有border、padding、inlinecontent、height、min-height、max-height分隔，那么外边距会塌陷。子元素多余的外边距会被父元素的外边距截断。

解决办法：