Html 为什么引导容器会更改我的表单页眉边距？

我有以下HTML：

<div class="container">
  <form class="form-base text-center" method="post" action="">
    <h1 class="h3 mt-4 mb-3">E-mail Addresses</h1>
    <p>The following e-mail addresses are associated with your account:</p>
  </form>  
</div>

当我将表单放在容器div中时，表单中h1头的顶部边距似乎是从容器顶部开始测量的，而不是从表单顶部开始测量的。就像这把小提琴：

当我删除container div并且表单本身存在时，表单中第一个标题的顶部边距现在从表单顶部应用（这就是我想要的）。就像这把小提琴：

请注意两个小提琴之间的边距差异

有人能告诉我为什么会发生这种情况吗？

根据，这是

边距崩溃的结果

块的上边缘和下边缘有时是组合的
（折叠）为单个边距，其大小为
单个保证金（或其中一个，如果它们相等的话）
称为“边距塌陷”的行为。请注意，浮动的边距
绝对定位的元素永远不会崩溃

在发生
页边距折叠的三种情况中，OP属于无内容分离父项和子项的情况，这是不言自明的，下面的示例描述了相同的情况

您可以使用
padding
来覆盖此行为，但使用
margin
时，这是意料之中的


div{
保证金：2rem 0；
背景：薰衣草；
}
p{
保证金：1rem；
背景：黄色；
}
此父元素包含两个段落！
本段与上述文本之间有
1rem
边距

我的下页边距与我的父母一起崩溃，产生了
2rem
的下页边距

我不能100%确定您到底想要什么，但是通过添加
填充：1rem到你的
。表单库
我相信，它会得到你想要的结果。请阅读Nidhin的答案以获得解释@修正的假设可能是重复的，但我不相信这个问题本身是重复的，因为这个问题并不假设你已经知道什么是边际崩溃。如果我知道效果的名称，我会在发布我的效果之前找到另一个问题。不幸的是，我不知道。其他人也可能不会。标记为副本正是为了这个目的。它阻止对已经回答的问题进行回答-无论原始海报是否知道正确的搜索词。部分原因是教育性的投票，部分原因是为了避免网站出现类似问题。
html,
body {
  height: 100%;
}

body {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color:  rgba(216, 240, 230, 1);
}

.form-base {
  width: 100%;
  max-width: 450px;
  padding: 0px;
  margin: auto;
  background: #fff;
  -webkit-border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;
  -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
  box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
}