The Rules of Margin Collapse

 By joshwcomeau - 2020-12-11

Description

“Margin collapse” has a dastardly reputation, one of the trickier parts of CSS. Fortunately, it gets a lot easier once you learn a few rules! In this tutorial, we take a deep dive into the governing p ...

Summary

  • 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.
  • The negative margins will share a space, and the size of that space is determined by the most significant negative margin.
  • By applying an inverse negative margin to the parent, you can "cancel out" a margin.
  • No 3D illustration for this one — honestly, it was too busy and chaotic-looking to offer much clarity 😅) Flow layout only So far, all the examples we've seen have assumed that we're "in-flow";

 

Topics

  1. Frontend (0.19)
  2. UX (0.14)
  3. Backend (0.09)

Similar Articles

An Interactive Guide to CSS Transitions

By joshwcomeau - 2021-03-06

This comprehensive guide shows how to use CSS transitions! A back-to-basics look at the fundamental building blocks we need to create microinteractions and other animations.

A Complete Guide to Flexbox

By CSS-Tricks - 2020-12-03

Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and ...

By CSS { In Real Life } | A Utility Class for Covering Elements - 2020-12-11

By Responsible Web Applications - 2021-02-16

HTML and CSS Tips and Tricks for creating applications that are both responsive and accessible out of the box

Grid vs. Flexbox

By DEV Community - 2021-02-21

Introduction: as we know that now a day how flex and grid become very important to design... Tagged with css.