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

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!

Oldest comments (0)

5 Websites To Learn Frontend Web Development Faster

In this article, Bentil Shadrack has curated 5 resourceful sites that will help you better you web development skills really fast.