CSS问题：h1的外边距未作用于父容器container-sm，而是与header产生间距

我有一个带有padding样式的<div class="container-sm">容器，但其子元素<h1 class="text-xl">的外边距并未作用于container-sm的边缘，反而在header与该容器所在的section之间形成了间距，相关代码如下：

CSS 代码 #

header {
    background: lightblue;
}
.container-sm {
    width: 70%;
    padding: 0 15px;
    background: #ddd;        
}

.text-xl {
    font-size: 2rem;
    margin: 40px 0 20px;
}

HTML 代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>I'm header</header>
    <section>
        <div class="container-sm">
            <h1 class="text-xl">Topic heading</h1>
        </div>
    </section>
</body>
</html>

问题图示 #

这是典型的**外边距塌陷（Margin Collapse）**问题：块级元素的上下外边距会和父元素的外边距合并，导致子元素的margin直接“穿透”父容器，作用到了外层的section和header之间。

以下是几种简单有效的解决方法：

• 给父容器.container-sm添加overflow: hidden，触发BFC（块级格式化上下文），隔离内部元素的外边距：

.container-sm {
    width: 70%;
    padding: 0 15px;
    background: #ddd;
    overflow: hidden; /* 新增属性 */
}

• 给父容器添加透明的上边框，带边框的容器不会与子元素发生外边距塌陷：

.container-sm {
    width: 70%;
    padding: 0 15px;
    background: #ddd;
    border-top: 1px solid transparent; /* 新增透明边框 */
}

• 使用display: flow-root创建BFC，这是现代浏览器专门为解决此类问题设计的属性，无额外副作用：

.container-sm {
    width: 70%;
    padding: 0 15px;
    background: #ddd;
    display: flow-root; /* 新增属性 */
}

内容的提问来源于stack exchange，提问作者itsraja