0

I read on MDN that adding overflow: hidden or float on a containing element creates a block formatting context. This should stop the margin collapsing of inner child elements. But, it doesn't seem to do that. Here's a working example:

.container {
  overflow: hidden;
  border: 1px dotted red;
}

h1, h2 {
  margin: 10px;
  border: 1px dotted blue;
}
<div class="container">
  <h1>First</h1>
  <h2> Second </h2>
</div>

However, adding float on individual h elements make their margin collapsing disabled.

Why doesn't creating new Block formatting context on parent element disable margin collapsing?

user31782
  • 7,087
  • 14
  • 68
  • 143
  • it will disable a specific margin collapsing (between chilld and parent) not ALL the margin collapsing – Temani Afif May 30 '20 at 11:25
  • and since you have border here, you can remove overflow because the border is already disabling child/parent margin. Use outline instead of border and you will see the effect of adding/removing overflow – Temani Afif May 30 '20 at 11:29
  • @TemaniAfif What does border have to do with block formatting content? – user31782 May 30 '20 at 11:42
  • border is one way among many that disable margin collapsing – Temani Afif May 30 '20 at 11:46
  • @TemaniAfif Do you have a link to any post for that or a fiddle, MDN doesnt mention this. – user31782 May 30 '20 at 11:47
  • *Two margins are adjoining if and only if: ... no line boxes, no clearance, no padding and no border separate them* https://www.w3.org/TR/CSS21/box.html#collapsing-margins – Temani Afif May 30 '20 at 11:48

0 Answers0