How do I uncollapse a margin?

user_27667 0
Viewed 17065

Collapsing margins in CSS: http://www.w3.org/TR/CSS21/box.html#collapsing-margins

I understand the purpose of the feature, but I'm trying to do layout, and I can't figure out how to turn it off.

The way usually explained in CSS tutorials is to either:

  1. Add a border
  2. Add a padding

All of these have side effects that become obvious when you're dealing with pixel-perfect layouts with background images and fixed paddings.

Is there any way to simply disable the collapsing without having to shove extra pixels into the layout? It doesn't make any sense for me to have to visually affect the document to change behavior like this.

collapse margin css
5 Answers

Use Flex or Grid layout.

In flex and grid containers, there's no such thing as margin collapsing.

More details in the specs:

3. Flex Containers: the flex and inline-flex display values

A flex container establishes a new flex formatting context for its contents. This is the same as establishing a block formatting context, except that flex layout is used instead of block layout. For example, floats do not intrude into the flex container, and the flex container’s margins do not collapse with the margins of its contents.

5.1. Establishing Grid Containers: the grid and inline-grid display values

A grid container establishes a new grid formatting context for its contents. This is the same as establishing a block formatting context, except that grid layout is used instead of block layout: floats do not intrude into the grid container, and the grid container’s margins do not collapse with the margins of its contents.

user_35972760
Related