Margin Collapse
A single margin may occasionally replace two margins.
Margin Collapse
Sometimes, an element’s top and bottom margins are combined into a single margin that equals the bigger of the two margins.
The left and right margins are not where this occurs! Just the upper and lower margins!
Take a look at this instance:
Example
Demonstration of margin collapse:
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}
The <h1> element in the example above has a 50px bottom margin, and the <h2> element has a 20px top margin.
The vertical margin between the <h1> and the <h2> should be a total of 70px (50px + 20px), according to common sense. However, the real margin is 50px as a result of margin collapse.
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 |
