「display: table-cell;」を使用した div ではマージンが機能しないのはなぜですか?

「display: table-cell;」で div できない理由マージンを適用しますか?

HTML では、div は「表示」などの CSS レイアウト設定を使用して配置できる隣接する要素です。 「display: table-cell;」を割り当てると、これらの div はテーブル内のセルのように動作し、特定のプロパティを継承します。そのようなプロパティの 1 つは、margin プロパティの無効性です。

原因: "display: table-cell;" との非互換性

MDN ドキュメントによると、margin はテーブル表示タイプの要素には適用されません。 「table-caption」、「table」、「inline-table」以外。 "表示: テーブルセル;"

解決策: Border-Spacing プロパティ

margin を使用する代わりに、border-spacing を適用して div 間の間隔を確保することを検討してください。ただし、このプロパティは、「display: table」レイアウトおよび「border-collapse:」を持つ親要素に適用する必要があります。

例:

HTML:

<div class="table">
  <div class="row">
    <div class="cell">123</div>
    <div class="cell">456</div>
    <div class="cell">879</div>
  </div>
</div>

CSS:

.table {
  display: table;
  border-collapse: separate;
  border-spacing: 5px;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  padding: 5px;
  border: 1px solid black;
}

jsFiddle を参照デモ

水平軸と垂直軸のマージンの変化

Diego Quieros が述べたように、border-spacing は水平軸と垂直軸に異なるマージンを作成する 2 つの値をサポートしています。

例:

.table {
  /*...*/
  border-spacing: 3px 5px; /* 3px horizontally, 5px vertically */
}

以上が「display: table-cell;」を使用した div ではマージンが機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。