ホームページ >ウェブフロントエンド >CSSチュートリアル >「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 サイトの他の関連記事を参照してください。