An demo, why there's no collapsed bottom margin ends up outside the parent?

Question

.container {
  width: 1024px;
  margin: 0 auto;
  min-height: 300px;
}

header {
  background-color: blueviolet;
  min-height: 100px;
}

main {
  background-color: aqua;
  min-height: 100px;
  width: 1024px;
  /* display: flex; */
  flex-direction: column;
}

.cards {
  background-color: hotpink;
  min-height: 300px;
}

.card1 {
  background-color: yellow;
  min-height: 300px;
  width: 30%
}

.card2 {
  background-color: rgb(15, 143, 136);
  min-height: 300px;
  width: 30%
}

.card3 {
  background-color: rgb(175, 15, 68);
  min-height: 300px;
  width: 30%
}

.herobox1 {
  background-color: rgb(229, 255, 0);
}

.herobox2 {
  background-color: rgb(20, 204, 112);
}

<div class="container">
  <header></header>
  <main>
    <div class="herobox1">
      <h1>Lorem ipsum dolor sit amet.</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta soluta aspernatur similique minima voluptatibus natus, odio asperiores numquam, inventore, dolore dolorem hic ex assumenda. Perferendis at non harum qui quae?</p>
    </div>
    <div class="herobox2">
      <h1>Lorem ipsum dolor sit amet.</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta soluta aspernatur similique minima voluptatibus natus, odio asperiores numquam, inventore, dolore dolorem hic ex assumenda. Perferendis at non harum qui quae?</p>
    </div>
  </main>
  <div class="cards">
    <div class="card1"></div>
    <div class="card2">2</div>
    <div class="card3">3</div>
  </div>
</div>

MDN on margin collapsing:

No content separating parent and descendants. If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-top of a block from the margin-top of one or more of its descendant blocks; or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of one or more of its descendant blocks, then those margins collapse. The collapsed margin ends up outside the parent.

I notice that the conditions for margin-bottom and margin-top are different.

Uncommenting the display:flex of <main> tag, why there is no "collapsed margin ends up outside the parent" effect between <main> and subsequent <div>?

Even if there's block formatting context created(<main> flexbox), but according to MDN, this only affects margin-top.

Unclear what you are asking. If main is not flex, then there _is_ a 16px / 1em margin between main and .cards - coming from the last p element in .herobox2 — 04FS, Sep 27 '19 at 08:14
@04FS I mean why there is no "margin bottom ends up outside the parent" (between `
` and `
`), after I add `display:flex` to`
`? I expect that there would be an effect like that. Becasue MDN only says there will not be that effect given "block formatting context created". But that's only for `margin-top`, `margin-bottom` is not included. So I am asking: is MDN wrong or I misunderstood something? — Rick, Sep 27 '19 at 08:15
@04FS Could you please explain a little bit? What does that answer have to do with my example? Do you mean: `flexbox(flex formatting context) -> no margin collapsed --> so no "collapsed margin ends up outside the parent" effect would ever happen`? — Rick, Sep 27 '19 at 08:30
The bottom margin of the `p` element in `.herobox2` stays _inside_ of `.herobox2`, because … _“There is no margin collapsing in a flex formatting context.”_ — 04FS, Sep 27 '19 at 08:44

An demo, why there's no collapsed bottom margin ends up outside the parent?

0 Answers0