Why does bootstrap container change my form header margins?

Question

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?

I'm not 100% sure what you exactly want, but by adding `padding: 1rem;` to your `.form-base` it'll get what, I believe, you want your outcome to be. Read Nidhin's answer for the explanation. https://jsfiddle.net/5L3pa04u/ — Matthew, Sep 25 '19 at 02:26
@disinfor the fix might be a duplicate, but I don't believe the question itself is a duplicate because this question doesn't assume you already know what margin collapsing is. If I knew the name of the effect I would have found that other question before posting mine. I didn't know unfortunately. And other people might not either. — echo, Sep 25 '19 at 19:48
Marking as a duplicate is exactly for this purpose. It prevents answers on an already answered question - regardless if the original poster knows what the correct search term is. It's partly an educational vote and partly to keep the site free of similar questions. — disinfor, Sep 26 '19 at 12:32

Nidhin Joseph · Accepted Answer · 2019-09-25T02:31:15.417

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>

Why does bootstrap container change my form header margins?

1 Answers1