父子边距重合

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

父子元素的边界重叠

<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分隔，那么外边距会塌陷。子元素多余的外边距会被父元素的外边距截断。

解决办法：

父子元素的边界重叠得解决方案： 在父元素上加上 overflow:hidden;使其成为 BFC。