DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Introduction of Margin Collapse in CSS
Top
Top

Posted on

Introduction of Margin Collapse in CSS

In CSS, adjacent margins can sometimes overlap. This is known as β€œmargin collapse”, and it has a reputation for being quite dastardly.
Here's a typical example, involving two sibling paragraphs:

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

Enter fullscreen mode Exit fullscreen mode

Image description

Instead of sitting 48px apart, their 24px margins merge together, occupying the same space!

This idea might sound simple, but if you've been writing CSS for a while, you've almost certainly been surprised when margins either don't collapse, or they collapse in weird and unexpected ways. In real-world projects, all kinds of circumstances can complicate matters.

The good news is that once we understand the rules behind this notoriously-confusing mechanism, it becomes a lot clearer, and a lot less surprising

In this series, we're going to dive deep into the details and figure it out. No more being bewildered!

Top comments (0)

πŸŒ™ Dark Mode?!

Turn it on in Settings