「display: table-cell;」を使用した Div でマージンが機能しないのはなぜですか? スペースを追加するにはどうすればよいですか?

Margin Property Not Affect Div with "display: table-cell;"

HTML では、次のようなシナリオが発生する可能性があります。 「display: table-cell;」を含む div 要素margin プロパティによって導入される予期された間隔が不足しています。

原因

margin プロパティは、表キャプション、表、または表キャプション以外の表示タイプを示す要素と互換性がありません。インラインテーブル。残念ながら、display: table-cell はこれらの例外の対象外です。

解決策

この制限を回避するには、代わりに border-spacing プロパティを利用することを検討してください。ただし、display: table レイアウトを特徴とする親要素に border-spacing を適用し、border-collapse を伴うことが重要です。

HTML

<div><pre class="brush:php;toolbar:false"><div>
<p>&l t;/div><br></p>
<p></p>
<p><strong>CSS</strong></p>
<p></p>
<pre class="brush:php;toolbar:false">.row {display:table-row;}<br>.cell {display:table-cell;padding:5px;border:1px plain black;}<br>

この設定では、 div 要素の間にスペースを追加できます。

水平マージンと垂直マージンバリエーション

さらに、border-spacing プロパティにより、2 つの異なる値を指定することで、水平軸と垂直軸に沿った独立したマージン値が可能になります。

.../border-spacing:3px 5px;} /<em> 水平方向に 3 ピクセル、垂直方向に 5 ピクセル</em>/<br>