「display: table-cell」要素でマージンが機能しないのはなぜですか?

マージンに依存しない要素

問題

表示でフォーマットされた隣接する div : テーブルセル; 5px の値に設定されている場合でも、margin プロパティの影響を受けません。

説明

MDN ドキュメントによると、margin プロパティは要素には適用されません。 table-caption、table、inline-table を除くテーブル表示タイプの場合。したがって、display:table-cell を持つ要素に影響を与えることはできません。

解決策

これらの要素間の間隔を確保するには、border-spacing プロパティを使用します。ただし、これには、display:table と border-collapse: Separate を親要素に適用する必要があります。

例:

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

.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 プロパティを使用し、 border-collapse と表示設定を使用すると、表示としてスタイル設定された div 要素間にマージンを効果的に作成できます。 table-cell;.

高度な機能

Diego Quirós 氏が指摘したように、border-spacing プロパティを使用すると、水平軸と垂直軸に異なるマージン値を定義できます。 。例:

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

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