Why does bootstrap container change my form header margins? [duplicate] - html

Question

This question already has answers here:
How to disable margin-collapsing?
(12 answers)
Closed 3 years ago.
I have the following 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>
With the following CSS:
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);
}
When I put the form inside a container div, the top margin for the h1 header inside the form seems to be measured from the top of the container and not the top of the form. Like in this fiddle: https://jsfiddle.net/a3e2cgLj/3/
When I remove the container div and the form exists by itself, the top margin for the first header inside the form is now applied from the top of the form (which is what I want). Like in this fiddle: https://jsfiddle.net/yfd3hxvc/
Notice the difference in margins between the two fiddles.
Can someone tell me why this is happening?

Answer 1

As per MDN Docs, this is a result of margin collapsing.
The top and bottom margins of blocks are sometimes combined
(collapsed) into a single margin whose size is the largest of the
individual margins (or just one of them, if they are equal), a
behavior known as margin collapsing. Note that the margins of floating
and absolutely positioned elements never collapse.
Of the three situations where margin collapsing occurs, the OP falls into No content separating parent and descendants which is self-explanatory and the below example depicts the same.
You may use padding to override this behavior, but with margin this is expected.
div {
margin: 2rem 0;
background: lavender;
}
p {
margin: 1rem;
background: yellow;
}
<div>This parent element contains two paragraphs!
<p>This paragraph has a <code>1rem</code> margin between it and the text above.</p>
<p>My bottom margin collapses with my parent, yielding a bottom margin of <code>2rem</code>.</p>
</div>