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
h1 {
margin-bottom: 50px;
}
h2 {
margin-top: 20px;
}Live preview
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
p {
margin-top: 30px;
margin-bottom: 30px;
}Live preview
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 |