Dealing with Vertical Margin Collapse

Sometimes, you really don't want the vertical margin collapse to happen. Here are three ways to deal with it.

by Travis Almand

HTML

<p>Sometimes margin collapse is frustrating on the vertical level with elements. It's nice about horizontal but not always vertical.</p>

<p>For example, in this case the child element's bottom and top margins flow outside of the container. We want to see the background color of the container but we do not.</p>

<div class='container'>
    <div class='child'></div>
</div>

<p>These three examples show what we want.</p>

<div class='container overflow'>
    <div class='child'>This one is using overflow auto.</div>
</div>

<div class='container border'>
    <div class='child'>This one is using a 1px border set to transparent to provide something for the margin to push against. Just in case overflow has to be something other than auto.</div>
</div>

<div class='container padding'>
    <div class='child'>This one is using a 1px padding to provide something for the margin to push against. Just in case overflow has to be something other than auto.</div>
</div>

CSS

.container {
    background-color: gainsboro;
    margin: 10px;
}
.border {
    border: 1px solid transparent;
}
.padding {
    padding: 1px;
}
.overflow {
    overflow: auto;
}

.child {
    background-color: white;
    height: 100px;
    margin: 10px;
    padding: 10px;
}