为什么< table>的边距与相邻的< p>？折叠 [英] Why doesn't a <table>'s margin collapse with an adjacent <p>?

问题描述

根据我对CSS规范的理解，段落上方或下方的表格应该使用它折叠垂直边距。但是，这不会发生在这里：

  ：100px; border：solid red 2px;} p {margin：100px}  

 < table> < tr> < td>这是一个单格的表，周围有100px的边距。 < / td> < / tr>< / tr>< / table>< p>这是一个100像素的边框。 > 
 
 
 
我认为两个元素之间会有100像素，但是有200像素 - 边距不会折叠。 
 
 
 
为什么不？
 
 
 
 编辑：似乎是表格的错误：如果我复制表和复制段落，两段将折叠边距。两个表不会。并且，如上所述，表格不会使用段落折叠边距。这是合规的行为吗？
 
 
 
 
 
 
  table {margin：100px ; border：solid red 2px;}  
 
 < table& < tr> < td>这是一个单格的表，周围有100px的边距。 < / td> < / tr>< / table>< table> < tr> < td>这是一个单格的表，周围有100px的边距。 < / td> < / tr>< / table>  
 
 
 
 
 
 
 
 
 
  p {margin：100px}  
 
 < p>这是一个边距为100px的段落。< / p>< p& ; / p>  
 
 
 
解决方案
边距折叠只定义块元素。尝试 - 添加 display：block 到表样式，突然它工作（并改变表的显示...）
 
 
 
表是特殊的。在CSS规范中，它们不是块元素 - 特殊的规则适用于大小和位置，它们的子元素（明显）和表元素本身。 
 
 
 
相关规格：
 
 
 
  http://www.w3.org/TR/CSS21/box.html#collapsing-margins  
 
 < a href =http://www.w3.org/TR/CSS21/visuren.html#blockboxbox =nofollow noreferrer> http://www.w3.org/TR/CSS21/visuren.html ＃block-box  
 
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>



解决方案
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

                        
这篇关于为什么&lt; table&gt;的边距与相邻的&lt; p&gt;？折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！