Posted over 10 years ago. Visible to the public. Repeats.

What collapsing margins are, how they work and when margins do not collapse

Imagine you have 2 HTML boxes. The first one has a margin-bottom of let's say 30px and the second one a margin-top of 20px. After rules of collapsing margins Archive have been applied we have a margin of 30px (not 50px) between these two boxes . This is because no addition of both margins takes place but the maximum of both is applied. This behavior is called collapsing margins.

Oftentimes it is a good behavior but collapsing margins can be annoying, too. For example child elements with margins also collapse with margins of the previous sibling of the parent box.

Nevertheless there are some exceptions where the behavior of vertical collapsing margins is not used.

Exceptions when margins do not collapse

Be aware that in some situations, margins do not collapse and we talk about Uncollapsing Margins Archive . The list below summarizes the conditions when margins do not collapse. It is an excerpt from Sitepoint - Collapsing Margins Archive .

  • flexbox children
  • absolutely positioned elements
  • inline-block elements
  • elements with overflow set to anything other than visible (They do not collapse margins with their children.)
  • floated elements
    • cleared elements (They do not collapse their top margins with their parent block’s bottom margin.)
  • the root element

Workaround: Utility classes to remove stacked margins

It is very hard to write your CSS so that all components can be combined in any layout and still retain collapsing margins.

For these situations, have some utility classes that remove the top or bottom margins, like .no-top-margin. When two margins don't collapse for some reason, you can apply the utility class to the component with the smaller margin.

In Bootstrap Archive these classes are .mt-0 (remove top margin) or .mb-0 (remove bottom margin).

Collapse margins in tile layouts

When your margins don't collapse due to one of the rules above, you can sometimes use this hack to fix it:

Say you have a tile grid with many 150*150 pixel tiles. Each tile has 10px margin on all sides. When you implement this by letting tiles float left, this 10px margins won't collapse with elements above or below the grid:

Copy
.tiles +clear_after .tile float: left height: 150px width: 150px margin: 10px // uncollapsable margin because this floated element will be cleared by its container

What you can do now is to wrap all tiles in another container (.tiles_inner) which clears the floats and neutralizes the outer tiles' margins with a negative margins. Now we reapply the outer tiles' margin to the outer container (.tiles). Since no floating is involved, this margin can now collapse properly:

Copy
.tiles margin: 10px // this margin can be collapsed .tiles_inner +clear_after margin: -10px // neutralize the margin that cannot be collapsed .tile float: left height: 150px width: 150px margin: 10px // uncollapsable margin because this floated element will be cleared by its container

You can only use this hack if the container knows the margin of its children.

Further reading

Please follow the links if you want to delve deeper into the subject.

Your development team has a full backlog of feature requests, chores and refactoring coupled with deadlines? We are familiar with that. With our "DevOps as a Service" offering, we support developer teams with infrastructure and operations expertise.

Owner of this card:

Avatar
Ulrich Berkmueller
Last edit:
over 1 year ago
by Henning Koch
Keywords:
overlap
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Ulrich Berkmueller to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more