<small>This is a response to CSS-Tricks' <a href="https://css-tricks.com/what-you-should-know-about-collapsing-margins/">What you should know about collapsing margins</a>.</small>
<h1>Collapsing child margins</h1>

<p>Six div elements. Each has <code>margin: 1em 0</code>. Margins are collapsed.</p>

<div class="red">
  <div class="orange">
    <div class="yellow">
      <div class="green">
        <div class="blue">
          <div class="purple">Collapsed</div>
        </div>
      </div>
    </div>
  </div>
</div>

<p>We want no collapsing and also want to keep the exact sizes so using <code>padding</code> or <code>border</code> is a no go.</p>

<hr />

<h2>Fighting against collapsing #1</h2>

<p>Use <code>inline-block</code> in 100% width. Leave the root element alone to avoid double margins.</p>

<div class="red">
  <div class="orange each-with-inline-block">
    <div class="yellow">
      <div class="green">
        <div class="blue">
          <div class="purple">Not Collapsed</div>
        </div>
      </div>
    </div>
  </div>
</div>

<p>Inline blocks are probably the most solid way to do this (least disadvantages).</p>

<hr />

<h2>Fighting against collapsing #2</h2>

<p>Use floats in 100% width. Can't as easily avoid double margins. (There is extra space after this paragraph.)</p>

<div class="red each-with-float">
  <div class="orange">
    <div class="yellow">
      <div class="green">
        <div class="blue">
          <div class="purple">Not Collapsed</div>
        </div>
      </div>
    </div>
  </div>
</div>

<p>Floats require much more CSS if you want to achieve the same result as with inline blocks:</p>

<div class="red clearfix">
  <div class="orange each-with-float">
    <div class="yellow">
      <div class="green">
        <div class="blue">
          <div class="purple">Not Collapsed</div>
        </div>
      </div>
    </div>
  </div>
</div>

<p>But it's only clearfix that is needed, which you probably already have in your project.</p>

<hr />

<h2>Fighting against collapsing #3</h2>

<p>Use <code>overflow: hidden</code>. Disadvantage is that you can't position stuff outside their parent. Dirty, but easy single line solution.</p>

<div class="red each-with-overflow-hidden">
  <div class="orange">
    <div class="yellow">
      <div class="green">
        <div class="blue">
          <div class="purple">Not Collapsed</div>
        </div>
      </div>
    </div>
  </div>
</div>

div {
    line-height: 1;
    margin: 1em 0;
}

.red { background-color: #ff6b6b; }
.orange { background-color: #ff9e2c; }
.yellow { background-color: #eeee78; }
.green { background-color: #4ecd9d; }
.blue { background-color: #4e97cd; }
.purple { background-color: #6c4ecd; }

.each-with-inline-block,
.each-with-inline-block div {
    display: inline-block;
    width: 100%;
}

.each-with-float,
.each-with-float div {
    float: left;
    width: 100%;
}

.clearfix:before,
.clearfix:after {
    content: ' ';
    display: table;
    width: 100%;
}

.each-with-overflow-hidden,
.each-with-overflow-hidden div {
    overflow: hidden;
}

/* Uninteresting styles here */
body {
    background-color: #333;
    color: #fff;
    margin: 2em;
    text-align: center;
}

h1,h2,h3,h4,h5,h6 {
    font-weight: 800;
}

a:link,
a:visited {
    color: #8BF;
}

small {
    position: absolute;
    right: 0.5em;
    top: 0.5em;
}