html - 是什么破坏了这个表格布局？

Question

使用 CSS 的表格、表格行和表格单元格的简单内容布局：

<div style="display:table-cell; border:1px solid blue">
    some content  <!-- this line wrappend in <p> tag in next example -->
    <p>some content</p>
    ...
</div>

两列布局，右侧有一个嵌套表

上面的示例，但左侧单元格的内容放置在段落（第一行）中：

上面的例子，但 <p> 打破了右表单元格的流动

如您所见，在<p>将标签放入左侧单元格后，右侧单元格将向下移动。我使用<p>或<h1>标记都没关系。假设它确实改变了行高，并且相邻单元格中的第一行与其对齐。

任何人都可以解释这种行为。如何防止相邻单元格的移位？

Answer 1

它通过垂直对齐来采用“表格单元”的浏览器默认行为来继承，继承，中间。（奇怪的是在你的页面底部）。

只需将 ' vertical-align:top' 添加到您的 CSS 中，肯定会解决您的问题。 jsFiddle 在这里分叉

例如，Firefox [用户代理 html.css] ：

tr {
  display: table-row;
  vertical-align: inherit;
}
tbody {
  display: table-row-group;
  vertical-align: middle;
}
thead {
  display: table-header-group;
  vertical-align: middle;
}
tfoot {
  display: table-footer-group;
  vertical-align: middle;
}
/* for XHTML tables without tbody */
table > tr {
  vertical-align: middle;
}
td { 
  display: table-cell;
  vertical-align: inherit;
  text-align: inherit; 
  padding: 1px;
}

Answer 2

它看起来与浏览器<p>自动添加到标签的边距有关，试试这个......

div[style*="table-cell"] p:first-child {
  margin: 0;
}