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?

On a "clearfix" method based on `display:table`, vertical margins do not collapse, with `display block` they do. Src: http://cssmojo.com/the-very-latest-clearfix-reloaded/ — Asons, Oct 08 '16 at 10:08
@LGSon I've read that somewhere. However, if vertical margins do not collapse, why the grey part touches the orange part on the top edge? — nalzok, Oct 08 '16 at 10:10
Because the `p` has a bottom margin, not a top, which is the reason the 2:nd is pushed downwards — Asons, Oct 08 '16 at 10:14
@LGSon But adding `margin-top: 1em;` for `p` does not make a difference(the code in my question has been updated) — nalzok, Oct 08 '16 at 10:17
Sorry, partly wrong by me, establish a new BFC will, add for example `overflow: auto;` to your `.clearfix-using_display-table, .clearfix-using_display-block` rule — Asons, Oct 08 '16 at 10:21
@LGSon I'm sorry, but I really cannot understand your last comment:1. What creates a new BFC? 3. The BFC is created in which box? 3. How does the `overflow: auto;` rule contribute to this layout? — nalzok, Oct 08 '16 at 10:35
Posted an answer with links to official resources that explains what and how BFC and collapse margins work — Asons, Oct 08 '16 at 10:39

score 1 · Accepted Answer · edited May 23 '17 at 12:33

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>

edited May 23 '17 at 12:33

Community

1
1

answered Oct 08 '16 at 10:32

Asons

84,923
12
110
165

Thank you for your explanation! However, my question is about why the top margins are collapsing but bottom margins are not **when there is no BFC**... – nalzok Oct 08 '16 at 10:56
@sunqingyao The link to http://cssmojo.com/the-very-latest-clearfix-reloaded/ explained that, that on a "clearfix" method based on `display:table`, vertical margins do not collapse, with `display block` they do. – Asons Oct 08 '16 at 11:01
Yeah, but it seems that while vertical margins do not collapse on the bottom, for some reason, they *do* collapse on the top. And as the title suggests, this question is intended to focus on why they collapse on the top. – nalzok Oct 08 '16 at 11:06
@sunqingyao The 2 ways combined explain that, where the top margin collapse because there is no BFC, the bottom does not on table but does on block. Also added a new link in my answer, which might be a duplicate to this question – Asons Oct 08 '16 at 11:13
That's it! Clearfix is implemented by creating the pseudo element `.clearfix:after`, so it's quite reasonable that only the button margin is affected. – nalzok Oct 08 '16 at 11:26
@sunqingyao Yepp ... kind of .. the clearfix adds an element to clear the float, the added element though, is the one that either collapse or don't collapse – Asons Oct 08 '16 at 11:27

Why top margins are collapsing but bottom margins are not?

1 Answers1