CSS Margin Collapse
Share
CSS Margin Collapse
Margin collapse is when two margins collapse into a single margin.
Top and bottom margins of elements are sometimes collapsed into a single
margin that is equal to the largest of the two margins.
Note: Margin collapse only happens with top and bottom
margins! Not left and right margins!
In the following example, the <h1> element has a bottom margin of 50px and
the <h2> element has a top margin of 20px. So, the vertical margin between the
<h1> and the <h2> would be a total of 70px (50px + 20px). But due to margin
collapse, the actual margin ends up being 50px:
Example
Demonstration of margin collapse:
h1 {
margin-bottom: 50px;
}
h2 {
margin-top: 20px;
}
Try it Yourself »
In the following example, each <p> element has a top margin of 30px and a
bottom margin of 30px. So, the vertical margin between the <p> elements should
have been 60px (30px + 30px). However, due to margin collapse, the actual margin
ends up being 30px:
Example
Demonstration of margin collapse:
p {
margin-top: 30px;
margin-bottom: 30px;
}
Try it Yourself »
All CSS Margin Properties
| Property |
Description |
| margin |
A shorthand property for setting all the margin properties in one declaration |
| margin-bottom |
Sets the bottom margin of an element |
| margin-left |
Sets the left margin of an element |
| margin-right |
Sets the right margin of an element |
| margin-top |
Sets the top margin of an element |
