What are the rules of margin collapse in CSS ?
Margin collapsing is a behavior of CSS where the vertical margins of block-level elements are combined into one i.e. to the margin of the element with the largest value. Sometimes when we assigned margins to elements it does not work in the way we think it to be and that creates confusion. The following rules will help you understand margin collapsing:
Rule 1: Only vertical margins of block-level elements are collapsed
The first rule is that only the vertical margins of elements will collapse and not the horizontal margins. The CSS rules that govern margin collapsing say that horizontal margins can never satisfy the required conditions.
Output: In this example, instead of sitting 68px apart the 34px margins of the first and second <p> tag merge, occupying the same space. As the bottom margin of the first paragraph merges with the top margin of the second paragraph. Hence, the space between the two-paragraph is 34px only.
Example 2: This example demonstrates what will happen if when horizontal margins are used.
Output: It is clear that horizontal margins do not collapse. Margin collapsing only happens to block-level elements. Other than block-level elements no other elements margin can collapse. Here, we have two <p> tags that were inline-block, hence their margin does not collapse.
Rule 2: The elements should be adjacent
Margin collapsing occurs only when the block elements come in direct contact with each other. They should not be separated by any line break or other elements. We generally provide <br> tag between two elements, but due to this, the margins will not collapse.
Example: In this example, we provide a line break between two elements.
Output: You can see in the output that the top margin of the second <p> tag does not collapse with the bottom margin of the first <p>tag and this happens due to the line break between the two elements. Elements must be adjacent for margin collapsing.
Rule 3. The element with the bigger margins will be used
This rule decides what will happen when the margins are asymmetrical. That means if the top element wants 62px of space below, while the bottom element only needs 24px above. In this condition, the space between the two elements will be 62px only. As it is already explained above if you have two adjacent elements with no padding, or border, or line break between them (i.e., their margins touch vertically), then their margin will collapse and the larger margin of the two wins.
Rule 4: The overflow property should be set to visible
Margins of elements do not collapse when the value of the overflow property of the elements is set to anything other than visible. Its value must be visible so that margin can collapse. Hence, overflow: hidden and overflow: auto will not let margin collapse.
Rule 5: Negative Margins will add up
A negative margin is used to reduce space between two elements. It put elements closer to each other. Consider that margin-bottom of first element is -65px and margin-top of second element is -25px . In that case, the space between the two elements will be -65px as it is more significant than -25px. But when one margin is positive and another is negative then these margins are added to get the space between the elements.
Output: In this example, margin-bottom of first div is 50px and margin-top of second div is -25px . So the size of space between them will be 25px (-25px+50px).
Rule 6: No collapsing of margins between Parent and Child elements
A margin is used to increase the space between the sibling elements. It cannot be used for increasing the space between parent and child elements as for that we have padding. Margin only gets transferred from child element to parent element as margin always tries to increase the space between siblings elements and due to which we feel that the margin is applied to the parent element. So there is no margin collapsing between parent and child elements there is only transferring of a margin between them.
For transferring the margin to the parent element the below conditions have to be satisfied:
- Parent and Child should be adjacent.
- The height of the parent element should be auto.
- Parent elements should not have any padding or border.
Rule 7: Collapsing only works on a flow layout
The margin never collapses when the elements are aligned in flexbox or grid box, or they are not in-flow e.g. absolutely positioned or floated.