margin collapsing in css

margin-collapsing.md

There are two main types of margin collapse:

• Collapsing margins between adjacent elements
• Collapsing margins between parent and child elements

Using a padding or border will prevent collapse only when Collapsing is between parent and children. Also, any value of overflow different from its default (visible) applied to the parent will prevent collapse.

Thus, both overflow: auto and overflow: hidden will have the same effect.

To prevent Collapsing margins between adjacent elements

• float: left / right
• display: inline-block
• position: absolute

Example 1

Has both parent/child and ajadent sibilings collapsing

<div id="container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>

#container {
    background: #ccc;
    width: 200px;
}
.square {
    margin: 10px;
    height: 50px;
    background: #f0f;
}

Example 1:

Example 2

Fix parent/child collapsing

#container {
    background: #ccc;
    width: 200px;
    position: absolute; /* to prevent parent/child collpasing */
}
.square {
    margin: 10px;
    height: 50px;
    background: #f0f;
}

Example 2:

Example 3

Fix parent/child collapsing and ajacent siblings collapsing

#container {
    background: #ccc;
    width: 200px;
}
.square {
    margin: 10px;
    height: 50px;
    background: #f0f;
    display: inline-block; /* to prevent adjacent collapsing */
    width: 180px;
}

Example 3: