テーブルセル要素でマージンが機能しないのはなぜですか?

テーブルセル要素でマージンが失敗するのはなぜですか?

display: table-cell で隣接する div 要素に margin: 5px を割り当てているにもかかわらず、マージンが表示されません。理由は何ですか?

原因を理解する

MDN ドキュメントによると、margin プロパティは、table-caption、table、inline-table を除くテーブル表示タイプの要素を除外します。したがって、display: table-cell.

問題の解決

margin を使用する代わりに、border-spacing プロパティの使用を検討してください。このプロパティは、display: tablelay および border-collapse: Separate を持つ親要素に適用されます。

コード例

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;
}

マージンのカスタマイズ値

border-spacing プロパティは 2 つの値を取ることもでき、異なる水平方向と垂直方向のマージンを許可します。

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

以上がテーブルセル要素でマージンが機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。