Uncollapse a vertical margin in two adjacent elements

Question

There are multiple ways posted here to uncollapse a vertical PARENT margin, but nothing about uncollapsing vertical margins of adjacent elements. The only solution I found was in this answer (back in 2009):

<div style="overflow: hidden; height: 0px; width: 0px;">&nbsp;</div>

Almost 7 years passed since there. Is some better way to do this (possibly using some CSS3)?

Basically, suppose you have: http://jsfiddle.net/ok2u3o3c/

<div class="one"></div>
<div class="two"></div>

div {
  width: 300px;
  height: 200px;
}

.one {
  margin-bottom: 10px;
  background-color: blue;
}

.two {
  margin-top: 20px;
  background-color: red;
}

What would be the most elegant way to make the distance between these 2 boxes 30px instead of 20px (where the first margin contributes 10px and doesn't collapses)?

Answer 1

Let's start with the relevant documentation explaining the behavior of collapsing margins:

8 Box model - 8.3.1 Collapsing margins

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

The following rules apply, which means that there are a things that you can do to prevent the margins from collapsing for sibling elements:

Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children)

Therefore if you float the elements with collapsing margins, they will no longer collapse:

.collapsing-margins {
  margin: 100px 0;
  background: #f00;
  float: left;
  width: 100%;
}

<div class="parent">
  <div class="collapsing-margins">Element</div>
  <div class="collapsing-margins">Element</div>
</div>

---

Margins of inline-block boxes do not collapse (not even with their in-flow children).

Therefore you could also add change the display of the elements to inline-block:

.collapsing-margins {
  margin: 100px 0;
  background: #f00;
  display: inline-block;
  width: 100%;
}

<div class="parent">
  <div class="collapsing-margins">Element</div>
  <div class="collapsing-margins">Element</div>
</div>