为什么 div display:table-row 忽略 margin？

在进行布局时，我们经常需要使用到 display: table 和 display: table-row 这两个 CSS 属性。然而，在使用 display: table-row 进行布局时，我们可能会发现该属性似乎忽略了 margin 的设置。那么，为什么会出现这种情况呢？

原因分析

在 HTML 中，我们可以使用 <table> 元素来创建表格，而在 CSS 中，我们也可以使用 display: table 属性来创建类似于表格的布局。使用该属性时，我们可以创建一个类似于表格的父容器，并在其中创建多个子容器，每个子容器便成为一个表格行。

当我们使用 display: table-row 属性来设置表格行的样式时，该属性会将该元素的 display 值设置为 table-row，从而让该元素呈现出类似于表格行的效果。同时，由于表格行的 margin 属性会影响表格单元格之间的间距，若所有表格行都应用了 margin 样式，则会导致表格不规则，因此，display: table-row 属性忽略了表格行的 margin 样式。

而对于其他 CSS 属性，如 width、height 等，display: table-row 属性都是可以正确渲染的。

解决办法

虽然 display: table-row 属性会忽略表格行的 margin 样式，但我们可以通过添加额外的包裹元素来解决该问题。

例如，我们可以创建一个父容器，并为该容器应用 display: table 样式，然后再创建多个子容器，为每个子容器应用 display: table-row 样式，并将子容器包裹在具有 margin 样式的分隔元素中，如下所示：

<div class="table">
  <div class="table-row-wrapper">
    <div class="table-row">表格行 1</div>
  </div>
  <div class="table-row-wrapper">
    <div class="table-row">表格行 2</div>
  </div>
  <div class="table-row-wrapper">
    <div class="table-row">表格行 3</div>
  </div>
</div>

<style>
.table {
  display: table;
}
.table-row-wrapper {
  margin: 5px;
  display: table-row;
}
.table-row {
  display: table-cell;
  background: ##eee;
  padding: 5px;
}
</style>

这样，在外部添加了一个代理元素后，我们便可以为表格行的 margin 样式提供有效的父容器，从而避免了表格行的 margin 样式被忽略的问题。

结论

在使用 display: table-row 属性时，我们应该注意该属性会忽略表格行的 margin 样式。如果需要为表格行添加 margin 样式，则可以通过添加额外的代理元素来解决该问题。