Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

From my understanding of the CSS spec, a table above or below a paragraph should collapse vertical margins with it. However, that's not happening here:

table {
  margin: 100px;
  border: solid red 2px;
}
p {
  margin: 100px
}
<table>
  <tr>
    <td>
      This is a one-celled table with 100px margin all around.
    </td>
  </tr>
</table>

<p>This is a paragraph with 100px margin all around.</p>

I thought there would be 100px between the two elements, but there are 200px -- the margins aren't collapsing.

Why not?

Edit: It appears to be the table's fault: if I duplicate the table and duplicate the paragraph, the two paragraphs will collapse margins. The two tables won't. And, as noted above, a table won't collapse margins with a paragraph. Is this compliant behaviour?

table {
  margin: 100px;
  border: solid red 2px;
}
<table>
  <tr>
    <td>
      This is a one-celled table with 100px margin all around.
    </td>
  </tr>
</table>
<table>
  <tr>
    <td>
      This is a one-celled table with 100px margin all around.
    </td>
  </tr>
</table>

p {
  margin: 100px
}
<p>This is a paragraph with 100px margin all around.</p>
<p>This is a paragraph with 100px margin all around.</p>
like image 212
raldi Avatar asked Sep 25 '08 22:09

raldi


People also ask

Why do margins not collapse?

One of those differences is that margins do not collapse: “A flex container establishes a new flex formatting context for its contents. This is the same as establishing a block formatting context, except that flex layout is used instead of block layout.

What causes margin collapse?

Margin collapse occurs when vertically adjacent margins of block-level elements collide to share a general margin space. The size of this shared space is dictated by the larger number margin. You can visualize this as an arm wrestling match, where the larger margin will take over and win.

Why left and right margins do not collapse in CSS?

1 Answer. Show activity on this post. Only block level elements can have their margin collapsed and if they are block level elements, they cannot have elements to their left or right.

In which scenario margins will collapse?

Margin collapsing occurs in three basic cases: Adjacent siblings. The margins of adjacent siblings are collapsed (except when the latter sibling needs to be cleared past floats). No content separating parent and descendants.

Why do my margins collapse when an element is empty?

If the empty element has anything that separates the top and bottom edges like padding or border, the element will have some height and its margins will collapse with their adjacent siblings. In the below example, there's an empty element shown with a red outline. Since it's empty, it doesn't affect the margins of its adjacent elements.

What is margin collapsing?

So when there are two adjacent siblings having margins, their margins overlap each other - known as collapsing. The element itself is indicated in rainbow colors. If you hover over elements, you'll see margins on the element collapses with its top and bottom element's margins. 2. Horizontal Margin Collapsing Does Not Happen:

Which margins of adjacent siblings collapse in HTML?

Only margins of adjacent siblings collapse. This means, If we have two elements with top and bottom margin, the Bottom margin of the first element will collapse with a top margin of the second element. This will happen for all the adjacent elements except the first and last elements.

What is the difference between collapsed margin and BFC?

The collapsed margin ends up outside the parent. If there is an element that creates BFC, the margins won't collapse, instead, they will add up. The elements which creates BFC are border,padding,height,min-height,max-height or any inline content. Margins of floated element and absolutely positioned element never collapse.


1 Answers

Margin collapsing is only defined for block elements. Try it - add display: block to the table styles, and suddenly it works (and alters the display of the table...)

Tables are special. In the CSS specs, they're not quite block elements - special rules apply to size and position, both of their children (obviously), and of the table element itself.

Relevant specs:

http://www.w3.org/TR/CSS21/box.html#collapsing-margins
http://www.w3.org/TR/CSS21/visuren.html#block-box

like image 169
Shog9 Avatar answered Sep 20 '22 22:09

Shog9