Why doesn't margin collapsing happen when divs contains tables?

Question

The title says it all. I went through the MDN page on margin collapsing, and from what I read don't see what would prevent marin collapsing in that case. You can see it in action below, with the orange box being 82px heigh (4*20+2), while I'd like it to be 22px heigh (20+2). What am I missing?

.outer { border: 1px solid orange }
.inner { margin-bottom: 20px }

<div class="outer">
  <div class="inner"><table></table></div>
  <div class="inner"><table></table></div>
  <div class="inner"><table></table></div>
  <div class="inner"><table></table></div>
</div>

score 3 · Answer 1 · answered Jul 06 '18 at 04:38

3

From Mastering margin collapsing:

Margin collapsing occurs in three basic cases:

[…]

Parent and first/last child: If there is no border, padding, inline part, block formatting context created, […], then those margins collapse.

Then, the Block formatting context article says:

A block formatting context is created by at least one of the following:

[…]

anonymous table cells implicitly created by the elements with display: table, table-row, table-row-group, table-header-group, table-footer-group (which is the default for HTML tables, table rows, table bodies, table headers and table footers, respectively), or inline-table

So a <table> creates a block formatting context. This is why the margins don’t collapse. You can change the <table>s into <div>s with display: table; or display: inline-block; (which also creates a block formatting context); this will prevent margin collapsing, too:

.outer { border: 1px solid orange }
.inner { margin-bottom: 20px }
.inner > div { display: table }

<div class="outer">
  <div class="inner"><div></div></div>
  <div class="inner"><div></div></div>
  <div class="inner"><div></div></div>
  <div class="inner"><div></div></div>
</div>

answered Jul 06 '18 at 04:38

Sebastian Simon

18,263
7
55
75

Better said than I, great answer! – Goose Jul 06 '18 at 04:39
This technique is used in (though not the main purpose of) Nicolas Gallagher's micro clearfix hack, see [this answer](https://stackoverflow.com/questions/25699262/css-using-displaytable-with-before-pseudo-element/25701312#25701312). – BoltClock Jul 06 '18 at 04:52
I've read this, but still don't get it. This article mentions that margin collapsing occurs in three basic cases. The note about BFC preventing margin collapsing is for the second case, where you could have margin collapsing between "parent and first/last child". But here I am in the first case: I expect margin collapsing between "adjacent siblings", and in that case, there is no note on BFC preventing margin collapsing. Am I reading the MDN page incorrectly? Or is that page imprecise? – avernet Jul 06 '18 at 16:59
I think that the MDN doc is imprecise (to be charitable): [section 8.3.1 Collapsing margins of the CSS 2.1 spec](https://www.w3.org/TR/CSS21/box.html#collapsing-margins) is clearer, and says that collapsing happens between *adjoining* margins, and margins are *not* adjoining if they don't belong to boxes participating in the same block formatting context. – avernet Jul 06 '18 at 17:13
This being said, I'm still unclear as to why the `
` don't belong to the same BCF. Sure, tables create a BCF, but while each table is a different BFC, the *parents* of the tables could still be part of the same BFC. Unless elements create a new BFC if any of their children do, but I see no indication that this is the case in the [MDN page on BFC](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context).
– avernet Jul 06 '18 at 17:24

Goose · Answer 2 · 2018-07-06T04:35:43.780

What makes tables special in this case is the display property they receive. If you define the tables as display block instead, you'll see the margin collapsing in action.

.outer { border: 1px solid orange }
.inner { margin-bottom: 20px }
table { display: block }

<div class="outer">
  <div class="inner"><table></table></div>
  <div class="inner"><table></table></div>
  <div class="inner"><table></table></div>
  <div class="inner"><table></table></div>
</div>

I don't believe this question is a duplicate, but this is a relevant question on the topic:

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

Specifically, check out the link here:

https://www.w3.org/TR/CSS21/box.html#collapsing-margins

margin-top margin-bottom Applies to: all elements except elements with table display types other than table-caption, table and inline-table

@Xufox I believe you're correct. I think I have a better explanation that I'm working on now. — Goose, Jul 06 '18 at 04:32

Why doesn't margin collapsing happen when divs contains tables?

2 Answers2