Html 为什么更改标题标记的边距会移动其父元素和祖辈元素？

我有一个

h1

标记，当我更改它的

margintop

属性时，它也会移动父元素和祖辈元素。有人能解释为什么会发生这种情况，以及如何解决它吗

如果您注意到，当

h1

边距设置为

0 auto

时，两个部分之间有正确的水槽

这就是所谓的“利润崩溃”。页边距正在父级外部折叠

如果没有创建边框、填充、内联内容、块\u格式\u上下文或清除以将块的页边距顶部与其第一个子块的页边距顶部分开，或者没有边框、填充、内联内容、高度、最小高度或最大高度以将块的页边距底部与其最后一个子块的页边距底部分开，然后这些利润率就会崩溃折叠的边距结束于父边距之外。

解决此问题的一种方法是向父级添加

溢出：隐藏


部分{
边缘底部：10px；
宽度：100vw；
高度：100vh；
背景色：红色；
溢出：隐藏；
}
截面：第n种类型（2）{
背景颜色：蓝色；
}
.通知{
宽度：100vw；
高度：10vh；
文本对齐：居中；
}
.通知h1{
保证金：50px自动；
}

我们的网站目前正在建设中，请随时通过社交媒体与我们联系。
因此，基本上，我需要设置父元素和祖父母元素的边距？@Robert您可以通过多种方法来修复它。您可以在节或标题上使用
填充顶部
，而不是标题上的边距。或者您可以将
overflow:hidden
添加到该部分。如果这两种方法都不适合你的话，还有其他的解决方法。好的，谢谢你提供的信息、链接和解决方案。@Robert，不客气。很抱歉，我错过了你问题中关于“如何修复”的部分。用解决方案更新了我的答案。
<section></section>
<section>
    <div class="notice">
        <h1>Our website is currently undergoing construction, please feel free to contact us on social media.</h1>
    </div>
</section>

section{
    margin-bottom: 10px;
    width: 100vw;
    height: 100vh;
    background-color: red;
}

section:nth-of-type(2){
    background-color: blue;
}

.notice{
    width: 100vw;
    height: 10vh;
    text-align: center;
}

.notice h1{
    margin: 0 auto;
}

<section></section>
<section>
    <div class="notice">
        <h1>Our website is currently undergoing construction, please feel free to contact us on social media.</h1>
    </div>
</section>

section{
    margin-bottom: 10px;
    width: 100vw;
    height: 100vh;
    background-color: red;
}

section:nth-of-type(2){
    background-color: blue;
}

.notice{
    width: 100vw;
    height: 10vh;
    text-align: center;
}

.notice h1{
    margin: 50px auto;
}