DEV Community

ShinjiX
ShinjiX

Posted on

CSS Expert Tip: Rules of Margin Collapse

In terms of spaces vertically talking about margin, only vertical space share the same space between each element.

Ex: A paragraph 1, and another paragraph 2. If you have

margin-top: 20px
Enter fullscreen mode Exit fullscreen mode

and

margin-bottom: 20px
Enter fullscreen mode Exit fullscreen mode

this does not equal to 40px, but 20px still, they share the same margin instead. This only applies vertically.

Exemption: Margins only collapse when they're touching.

Image description

Top comments (0)