Collapsing Margins: Parents and Children Comparison

Collapsing Margins: Parents and Children Comparison.markdown

Collapsing Margins: Parents and Children Comparison

Forked from CSS-Tricks's Pen Collapsing Margins: Vertical.

A Pen by zqlu on CodePen.

License.

index.html

<h1>Collapsing Child Margins</h1>

<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>

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

style.css

/* PRESENTATIONAL STYLES */

html {
  font-size: 16px;
}

body {
  background-color: #333;
  color: #fff;
  font-family: Helvetica;
  padding: 25px;
  text-align: center;
}

h1 {
  font-size: 2em;
  font-weight: 800;
}

/* DEMO STYLES */

/* Parent */
div {
  margin: 15px 0;
}

/* Another way to disable Margin Collapse */
div {
  /* This will create a new BFC for each div */
  overflow: hidden;
}

/* Add padding to the parent */
.padding {
  padding: 1px 0;
}

/* Here come the children */
.red {
  background-color: #ff6b6b;
}

.orange {
  background-color: #ff9e2c;
}

.yellow {
  background-color: #eeee78;
}

.green {
  background-color: #4ecd9d;
}

.blue {
  background-color: #4e97cd;
}

.purple {
  background-color: #6c4ecd;
}