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>
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.
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.
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.
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.
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.
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:
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.
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.
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.
http://www.w3.org/TR/CSS21/box.html#collapsing-margins
http://www.w3.org/TR/CSS21/visuren.html#block-box
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With