Nesting doesn’t prevent collapsing

Alright, here’s where it starts to get weird. Consider the following code:

<style>
p {
margin-top: 48px;
margin-bottom: 48px;
}
</style>
<div>
<p>Paragraph One</p>
</div>
<p>Paragraph Two</p…


This content originally appeared on DEV Community and was authored by TopCoder

Alright, here's where it starts to get weird. Consider the following code:

<style>
  p {
    margin-top: 48px;
    margin-bottom: 48px;
  }
</style>
<div>
  <p>Paragraph One</p>
</div>
<p>Paragraph Two</p>

We're dropping our first paragraph into a containing <div>, but the margins will still collapse!

Image description

How can this be? Well, it turns out that many of us have a misconception about how margins work.

Margin is meant to increase the distance between siblings. It is _not _meant to increase the gap between a child and its parent's bounding box; that's what padding is for.

Margin will always try and increase distance between siblings, even if it means transferring margin to the parent element! In this case, the effect is the same as if we had applied the margin to the parent <div>, not the child <p>.

“But that can't be!”, I can hear you saying. “I've used margin before to increase the distance between the parent and the first child!”

There are some conditions that must be satisfied in order for the margin to be transferred to the parent (and collapsed):

  • No other elements in-between (see earlier rule, about the <br>).
  • The parent element doesn't have a heightset.
  • The parent element doesn't have any padding or border along the relevant edge. That last condition is really common, so let's look at a quick example. In this case, our nested child can't combine margin with the next paragraph, because the parent has some padding in the way:

Image description

You can think of padding/border as a sort of wall; if it sits between two margins, they can't collapse, because there's a wall in the way. The width doesn't matter, either; even 1px of padding will interfere with margin collapse.


This content originally appeared on DEV Community and was authored by TopCoder


Print Share Comment Cite Upload Translate Updates
APA

TopCoder | Sciencx (2022-05-13T01:32:09+00:00) Nesting doesn’t prevent collapsing. Retrieved from https://www.scien.cx/2022/05/13/nesting-doesnt-prevent-collapsing/

MLA
" » Nesting doesn’t prevent collapsing." TopCoder | Sciencx - Friday May 13, 2022, https://www.scien.cx/2022/05/13/nesting-doesnt-prevent-collapsing/
HARVARD
TopCoder | Sciencx Friday May 13, 2022 » Nesting doesn’t prevent collapsing., viewed ,<https://www.scien.cx/2022/05/13/nesting-doesnt-prevent-collapsing/>
VANCOUVER
TopCoder | Sciencx - » Nesting doesn’t prevent collapsing. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/05/13/nesting-doesnt-prevent-collapsing/
CHICAGO
" » Nesting doesn’t prevent collapsing." TopCoder | Sciencx - Accessed . https://www.scien.cx/2022/05/13/nesting-doesnt-prevent-collapsing/
IEEE
" » Nesting doesn’t prevent collapsing." TopCoder | Sciencx [Online]. Available: https://www.scien.cx/2022/05/13/nesting-doesnt-prevent-collapsing/. [Accessed: ]
rf:citation
» Nesting doesn’t prevent collapsing | TopCoder | Sciencx | https://www.scien.cx/2022/05/13/nesting-doesnt-prevent-collapsing/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.