Home » CSS » What is margin collapsing in CSS and how does it work?

If you have a problem when you apply margins to some element, it doesn’t work? If the answer is yes, then you have already encountered the problem of margin collapsing. We can’t call it a problem, it’s the behavior of the margin property to collapse when two margins in the same or different direction collapse.

What is margin collapsing?

When we apply top or bottom margins to multiple elements, their margins sometimes get combined into a single margin. This behavior is called margin collapsing. Certain rules need to be understood to use margins properly. If not used properly, margin collapsing can give you unexpected results.

When does margin collapsing happen?

There are three cases to consider before creating a structure that collapses.

Case 1. When children are adjacent siblings: 

Only the margins of adjacent siblings collapse. This means that if we have two elements with top and bottom margins, the Bottom margin of the first element will collapse with the top margin of the second element. This will happen for all the adjacent elements except the first and last elements.

In the example below, grab planks with the mouse or move sliders to add vertical margins to the plank. Observe the borders of the parent. Rotate the planks to reveal the overlapping margins. margins of the first and last element go outside the parent bounds. This shows margins will work outside their parent.

Case 2. When there is no content separating parent and descendants:

Margin is the most outer border of the DOM element. When no border or padding is defined, the margin-top or margin-bottom of the parent’s descendants will collapse. The collapsed margin ends up outside the parent. If there is an element that creates BFC, the margins won’t collapse, instead, they will add up. The elements that create BFC are border, padding, height, min-height, max-height, or any inline content. Margins of the floated element and the absolute positioned element never collapse.

In this example below, there is one <hr/> after the second paragraph. This breaks the margin collapsing of the second and last plank. Observe a small line between those planks. Rotating planks will reveal the backside, which shows non-overlapping elements due to this <hr/> block.

Case 3. When an element is empty:

When an element is empty, there is no point in showing only margins between them. So when using empty elements, when there is no physical separation between the top edge and bottom edge, the element will act as if it isn’t even there. If the empty element separates the top and bottom edges, like padding or border, the element will have some height and its margins will collapse with its adjacent siblings.

The example below has an empty element with a red outline. Since it’s empty, it doesn’t affect the margins of its adjacent elements.  By clicking the checkbox, min-height:1px is added to the empty element. Observe the margins from the backside.  When the checkbox is off, the element’s margins behave like there is no element.  When checked, because of a separation between the element’s top and bottom edges, margins appear.

Collapsing Rules:

1. Elements Collapse Margins Only In Vertical Direction:

In the example below, paragraphs 1 to 7 have top and bottom margins set to 30px.

p{margin:30px;}

So when two adjacent siblings have margins, their margins overlap each other – known as collapsing. The element itself is indicated in rainbow colors. If you hover over elements, you’ll see margins on the element collapse with its top and bottom elements’ margins.

2. Horizontal Margin Collapsing Does Not Happen:

Collapsing happens only on the top and bottom edges of the box model or sibling elements. The rule of thumb here is that even if we have margins on the left and right sides of the element, they won’t only work on flow layouts; layout modes that create BFC will always display the element as a block, so they can’t be placed side by side. Display modes like inline-block or inline-flex will stop margin collapsing.

p{margin:20px;}

You can see in the paragraph below, 2 small inline elements with horizontal margins. The margins in the horizontal direction add up instead of collapsing, making in 40px space in between inline paragraphs.

3. Elements That Are Adjacent Will Collapse Margins:

Elements with no separator in between will collapse. A separator could be any self-closing element like <br/> or <hr/>, which creates a DOM element in-between. It will break the collapsing behavior of the adjacent element. Any container tags will follow the first 3 cases and behave as per their defined properties.

p{margin:30px;}
hr {
margin: 0;
padding: 0;
height: 1px;
background: #000;
position: relative;
}

We’re using paragraphs with margin:30px in the example. The first two paragraphs have collapsed between the bottom and top margins. The <hr/> element breaks the collapsing, so the bottom margin of the second paragraph and top margin of the third paragraph do not collapse.

4. Bigger Margin Value Will Win Over Smaller Ones:

When two or more margins collapse in one direction, the margin with the bigger value will be the collapsed value.

For example, below, each section has a margin of 20px. The heading element has a margin-top value of 70px.

section {
margin: 20px auto;
}
h3 {
margin: 70px auto 0px auto;
}

So the margin-top of the heading and section will collide, the margin-top of the heading wins. Overall, the sections to understand how to section’s margin and margins of the section with heading collapses. Hover on the sections to see collapsed margins.

5. Margin Collapsing Will Happen Even On Nested Elements:

In the same example above, we’re using the nesting of elements inside sections. Sections have some margin, the child inside the parent has some margin, so the total margin is still the maximum of all collapsed margins among their nested child. Nesting does not prevent collapsing rules from applying to adjacent elements. The collapsing happens even outside the parent container element without box-model properties. Over on the section to see margin is extending outside of the section element.

section {
margin: 20px auto;
}
section h3 {
margin: 70px auto 0px auto;
}

6. Direction Of The Margins Decides Final Margins:

In the example below, we can have multiple margins in the same direction. Here, margin-top is collapsing with both on the section, div, and heading in the top direction. All three elements have different margins collapsing in the same direction.

section {
margin: 20px auto;
}
section > div{
margin: 40px 0 0 0;
}
section div h3 {
margin: 70px auto 0px auto;
}

So the final margin will be in the top direction, which is the biggest one – Heading.

7. Margins Collapsing Can Happen on a Group Of Elements:

In the same example above, another thing to notice is that we are using nested children and nested margins. More than two margins can collapse if they fall in any of the three cases defined earlier.

section {
margin: 20px auto;
}
section > div{
margin: 40px 0 0 0;
}
section div h3 {
margin: 70px auto 0px auto;
}

8. Negative Margins Overlaps:

Unlike positive margins, negative margins will create overlays of adjacent elements on top of each other. When we use negative margins, the Element defined last in the source code will hide its underlying element because of the natural stacking context. Negative margins follow the same rules as normal margins, defined in points 1-7.

9. Multiple Positive and Negative Margins Cancels Margins:

When multiple positive and negative margins collapse, there’s simple math. Add the winners of each to get the resultant margin. Real-life cases of this type will create chaos as there could be layers of positive and negative margins collapsing with each other, canceling out the values of other margins.

For example, if we use a nested structure with positive and negative margins, the Final result may or may not be what is expected. There is no demo because I don’t encourage using negative and positive margins together.

10. Collapsing Happens On Flow Layout Only:

Margin collapsing will occur for the layouts using the flow model. Anything that creates a new BFC will move elements out of flow, and margins of such elements won’t collapse. Floats, Inline-blocks, absolute position, flex, or grid will stop margin collapsing.

Final words:

Now that you have read the entire article, you know how to use margins in your layouts. The easiest way is to use margins in only one direction so there is no two-directional or negative collapsing. Knowing margin collapsing and why it happens, you can solve many common problems in the layout and probably avoid making those mistakes.