Why top margins are collapsing but bottom margins are not?

Question

As you can see in the following demo, in left-column, the upper padding edge of .clearfix-using_display-table(yellow part) and that of .clearfix-using_display-table p(silver part) touch each other. However, on the lower edge, for some reason, two edges don't touch each other.

In fact, the layout of right-column is what I think boxes in left-column should be look like.

.left-column,
.right-column {
  background-color: orange;
  width: 150px;
}
.left-column {
  float: left;
}
.right-column {
  float: right;
}
.clearfix-using_display-table,
.clearfix-using_display-block {
  background-color: yellow;
  width: 125px;
}
.clearfix-using_display-table p,
.clearfix-using_display-block p {
  background-color: silver;
  width: 100px;
  margin-top: 1em;
}
.clearfix-using_display-table:after,
.clearfix-using_display-block:after {
  content: " ";
  clear: both;
}
.clearfix-using_display-table:after {
  display: table;
}
.clearfix-using_display-block:after {
  display: block;
}

<div class="wrapper">
  <div class="left-column">
    <h3>Table</h3>
    <div class="clearfix-using_display-table">
      <p>Lorem Ipsum...</p>
      <p>Lorem Ipsum...</p>
    </div>
  </div>
  <div class="right-column">
    <h3>Block</h3>
    <div class="clearfix-using_display-block">
      <p>Lorem Ipsum...</p>
      <p>Lorem Ipsum...</p>
    </div>
  </div>
</div>

I guess this have something to do with margin collapsing and the establishment of a new BFC, but I'm not sure. Can someone clean thinks up for me?

Answer 1

Using "clearfix" with display: table will keep the bottom margin, display: block will not.

Src: http://cssmojo.com/the-very-latest-clearfix-reloaded/

Update: Why the top margin collapse is because of no BFC is estabished on its immediate parent

---

To make the margins not collapse, add a BFC, in this case on the p parent, like in below sample, by adding for example overflow: auto.

More to read: Mastering margin collapsing

Update: Why doesn't a <table>'s margin collapse with an adjacent <p>

.left-column,
.right-column {
  background-color: orange;
  width: 150px;
}
.left-column {
  float: left;
}
.right-column {
  float: right;
}
.clearfix-using_display-table,
.clearfix-using_display-block {
  background-color: yellow;
  width: 125px;
  overflow: auto;                      /*  establish BFC  */
}
.clearfix-using_display-table p,
.clearfix-using_display-block p {
  background-color: silver;
  width: 100px;
}
.clearfix-using_display-table:after,
.clearfix-using_display-block:after {
  content: " ";
  clear: both;
}
.clearfix-using_display-table:after {
  display: table;
}
.clearfix-using_display-block:after {
  display: block;
}

<div class="wrapper">
  <div class="left-column">
    <h3>Table</h3>
    <div class="clearfix-using_display-table">
      <p>Lorem Ipsum...</p>
      <p>Lorem Ipsum...</p>
    </div>
  </div>
  <div class="right-column">
    <h3>Block</h3>
    <div class="clearfix-using_display-block">
      <p>Lorem Ipsum...</p>
      <p>Lorem Ipsum...</p>
    </div>
  </div>
</div>