Loading lesson path
Overview
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.
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:
h1 {
margin-bottom: 50px;
}
h2 {
margin-top: 20px;
}
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:p {
margin-top: 30px;
margin-bottom: 30px;
}Formula
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