What are the rules of margin collapse in CSS ? - GeeksforGeeks

23 Apr, 2021
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.
Example 1:
HTML
<html><head>  <style>    p {      font-size: 24px;      margin-top: 34px;      margin-bottom: 34px;      background-color: rgb(79, 236, 119);    }  </style></head><body>  <div class="container">    <p>      This paragraph's bottom      margin is collapsed.    </p>        <p>      This paragraph is 34px      below the above text.    </p>    </div></body></html>
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.
HTML
<html><head>  <style>    p {      font-size: 24px;      display: inline-block;      margin-left: 34px;      margin-right: 34px;      background-color: rgb(79, 236, 119);    }  </style></head><body>  <p>This is paragraph 1.</p>  <p>This is paragraph 2.</p></body></html>
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.
HTML
<html><head>  <style>    p {      margin-top: 32px;      margin-bottom: 32px;      background-color: rgb(79, 236, 119);    }  </style></head><body>  <p>This is paragraph 1</p>  <br>  <p>This is paragraph 2.</p>  </body></html>
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.
Example:
HTML
<html><head>  <style>    div {      font-size: 24px;      height: 75px;      background-color: rgb(79, 236, 119);    }      #b1 {      margin-bottom: 50px;    }      #b2 {      margin-top: -25px;    }  </style></head><body>  <div id="b1">This is block 1.</div>  <div id="b2">This is block 2.</div></body></html>
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.
CSS-Properties
CSS-Questions
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript
Convert a string to an integer in JavaScript