Margin Collapse in CSS with Example
Margin collapse in CSS is a typical behavior which collapses the top and bottom margins of neighboring elements into a single margin. It takes place when the top or bottom margin of one element comes into contact with the top or bottom margin of another element.
Only vertical margins collapse into a single margin, which is equal to the largest of the two collapsed margins. In other words, however, horizontal (i.e. left and right) margins do not.
Let’s understand the basic concept of margin collapse with a simple example. Suppose you have two paragraphs with margins.
Example 1:
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 20px;
}
</style>
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</body>
</html>
In this example, we have styled two paragraphs, each having 20px margin on all four sides (top, right, bottom, and left). You will expect the vertical space between the two paragraphs to be 40px. But the actual space will be only 20px, not 40px due to margin collapse.
This is because when two or more vertical margins meet, they will overlap and combine to form a single margin. This is called margin collapsing. In this case, the height of the resulting margin will be equal to the height of the larger of the two collapsed margins. Therefore, there will be only a margin of 20px between the two paragraphs. However, the left and right margins will not collapse.
Cases Where Margin Collapse Occurs in CSS
In CSS, margin collapse occurs under some specific conditions. They are as follows:
1) When two block-level elements are above one another, the bottom margin of the first element will collapse with the top margin of the second element. The combined space between the two elements will be equal to the larger of the two margins, not the sum of both, as shown in the below figure.
[adinserter block=”5″]
2) Margin collapse also happens in CSS when an element is contained inside of another element. It doesn’t matter where the two margins meet to each other. In other words, when a parent element contains one or more child elements, assuming there is no padding or border separating margins, the top and/or bottom margins of the parent and child elements will also collapse together into a single margin. Look at the below figure.
3) When we have an empty block-level element with a margin, but no border or padding, the top margin touches the bottom margin and they collapse together, as shown in the below figure.
4) When a margin is touching the margin of another empty element, it will itself collapse. Therefore, a series of an empty block-level elements take up a very little space because all their margins collapse together to form a single small margin. Look at the below figure.
[adinserter block=”2″]
Advanced Example of Margin Collapse
Let us take some advanced examples based on the above points of margin collapse in CSS.
Example 2:
<!DOCTYPE html>
<html>
<head>
<style>
.first {
margin-bottom: 30px;
background-color: #a3c1ad;
padding: 20px;
}
.second {
margin-top: 20px;
background-color: #c1a3ad;
padding: 20px;
}
</style>
</head>
<body>
<div class="first">First Element</div>
<div class="second">Second Element</div>
</body>
</html>
In this example, we have defined two div elements. The first div element with the class .first has a bottom margin of 30px. The second <div> element with the class .second has a top margin of 20px. Due to margin collapse behavior in CSS, the resulting margin between the two div elements will be 30px, which is the larger of the two margins.
Example 2:
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
margin: 30px;
background-color: red;
}
.child {
margin: 20px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">Child Element</div>
</div>
</body>
</html>
In this example, we have defined a parent div element with class .parent that contains a child element with class .child. The parent element has a margin of 30 pixels on all sides, while the child element has a margin of 20 pixels on all sides.
Due to the CSS margin collapse, the top margin of the parent element collapses with the top margin of the child element. Instead of having a combined margin of 50 pixels (30px from the parent + 20px from the child), the resulting top margin will be 30 pixels, which is the larger of the two collapsed margins.
Similarly, the bottom margin of the parent element collapses with the bottom margin of the child element. The resulting bottom margin will be 30 pixels, which is again the larger of the two collapsed margins.
Example 3:
<!DOCTYPE html>
<html>
<head>
<style>
.empty-div {
margin: 20px;
background-color: red;
}
</style>
</head>
<body>
<div class="empty-div"></div>
</body>
</html>
In this example code, there is a div element with class .empty-div, which has no content, padding, or border. The top margin and bottom margin of the empty block-level element collapse into a single margin. The margins of an empty element touch each other and do not stack, which results only the larger margin.
Example 4:
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
margin: 20px;
padding: 10px;
background-color: #f0f0f0;
}
.child {
margin: 30px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">Child Element</div>
</div>
<div class="parent"></div>
</body>
</html>
In this example, the margin between the .parent and .child elements will be 30px, not 50px, because of the margins collapsing. The margin of empty div element with class .parent will collapse with the margin of the next .parent div element, which results in a margin of 20px, not 40px.
Best Practices to Prevent Margin Collapse in CSS
(1) When you need white space inside a container, use padding instead of using margin. This is because padding does not collapse. For example:
.container {
padding: 20px;
}
(2) You can prevent the two margins from collapsing with one another by applying padding to the parent element. For example:
.parent {
margin: 30px;
padding: 10px;
}
Example 5:
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
margin: 30px;
padding: 10px; /* Padding inside the parent element prevents the margins from collapsing. */
background-color: #f0f0f0;
}
.child {
margin: 20px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">Child Element</div>
</div>
</body>
</html>
(3) By using border to the parent element, you can also prevent the two margins from collapsing with one another. For example:
.parent {
margin: 30px;
border: 1px solid transparent;
}
(4) Setting the overflow property of the parent element to anything other than “visible” can also avoid the margin collapse.
.parent {
margin: 30px;
overflow: hidden;
}
(5) You can also prevent margin collapse in CSS using the modern layout techniques like Flexbox or Grid. For example:
.container {
display: flex;
flex-direction: column;
}
