</>Jonathan Harrell

Main Menu

Site Tools

What’s the Deal with Margin Collapse?

The concept of margin collapse is foundational to an understanding of the box model in CSS, but it is actually quite complex and potentially confusing. The spec describing how it works is thorough but difficult to understand. This article is an attempt to give some visual examples to the concepts from the specs.

The basic idea is that if two margins are adjoining, they will collapse into one margin, which will have the greater of the two margin values (it will be the more negative of the margins if both margins are negative).

What makes margins adjoining?

Link to this section

The key is understanding when two margins are adjoining. Here are the basic situations:

Sibling Elements

An element with a bottom margin of 30px followed by a sibling element with a top margin of 30px will have their margins collapsed into a total margin of 30px between them. 30 30 30

The bottom margin of an element collapses with the top margin of its proceeding sibling.

Child Elements

A parent element with a bottom border or bottom padding and a bottom margin of 30px will not collapse with its last child element’s bottom margin of 30px. 30 30 30

The top margin of an element collapses with the top margin of its first child element.

An element with a bottom margin of 30px and its last child element with a bottom margin of 30px will collapse so that the child element’s margin collapses with that of its parent. 30 30 30

The bottom margin of an element collapses with the bottom margin of its last child element.

An Element’s Own Top and Bottom Margins

An element that doesn’t take up space in the flow of the page will have its top and bottom margins collapse to 0. 30 0 0 30

The top and bottom margins of an element collapse if the element has no height, padding, or border and all of its children elements’ margins collapse (height is represented here only for clarity).

When does margin collapse not occur?

Link to this section

There are several exceptions to the rules. This is where things can get hard to follow. Following are some visual examples of situations where margins would not collapse. For a more complete understanding, refer to the specs.

Certain attributes will cause an element and its first and last child element margins to not collapse. 30 30 30 30

If the parent element has a top border or padding, the parent’s top margin does not collapse with the first child’s top margin.

A parent element with a top border or top padding and a top margin of 30px will not collapse with its first child element’s top margin of 30px. 30 30 30 30

If the parent element has a bottom border or padding, the parent’s bottom margin does not collapse with the last child’s bottom margin.

A parent element with a top border or top padding and a top margin of 30px will not collapse with its first child element’s top margin of 30px. 30 30 30 30

Further Margin Collapse Resources

Link to this section

There are some additional, more complex scenarios that prevent collapse that aren’t covered here. For updated and complete information, see the CSS Box Model Spec.

More Articles

Go to article

System-Based Theming with Styled Components

Learn how to support system-based theming in Styled Components, while allowing a user to select their preferred theme and persist that choice.

Go to article

Implicit State Sharing in React & Vue

Learn to use React’s Context API and provide/inject in Vue to share state between related components without resorting to a global data store.

Go to article

Component Reusability in React & Vue

Learn how to use render props in React and scoped slots in Vue to create components that are flexible and reusable.

Go to article

Better Typography with Font Variants

Learn how to use font variants, including ligatures, caps, numerals and alternate glyphs, to create more precise, beautiful typography on the web.