CSS Margin Collapse
Margin collapse is when two margins collapse into a single margin.
CSS Margin Collapse
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 |
