CSS Margins Collapsing and how to deal with them

Edit on Github
css-sass/CSS_Collapsing-margins.md
Oct 22, 2017
CSS & Sass

tl;dr

  • Vertical margins between adjacent boxes (elements) collapse. The bigger value of the two margins is applied

Collapsing margins happen when two vertical margins come in contact with one another. If one margin is greater than the other, then that margin overrides the other, leaving one margin.

.

The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as margin collapsing. Note that the margins of floating and absolutely positioned elements never collapse.

Solution is simple: apply margins in only one direction. Personally i use margin-bottom because it makes more sense to me

h1, h2, h3, h4, h5, h6, p {
  margin-top: 0;
  margin-bottom: 1em;
}