What are the rules of margin collapse in CSS ?

In this article we will learn 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 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.

Example 1: Here is the implementation of the above-explained rule.

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 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 element 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, 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 the margin collapse.

Rule 5: Negative Margins will add up: A negative margin is used to reduce the space between two elements. It put elements closer to each other. Consider that margin-bottom of the first element is -65px and the margin-top of the 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.

Example:

Output: In this example, the margin-bottom of the first div is 50px and the margin-top of the 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 the child element to the parent element as the margin always tries to increase the space between siblings elements and due to this 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 a flexbox or grid box, or they are not in-flow e.g. absolutely positioned or floated.