Warum funktioniert der Rand nicht bei Divs mit „display: table-cell;' und wie kann ich Abstände hinzufügen?

Margin-Eigenschaft wirkt sich nicht auf Div mit „display: table-cell;“ aus

In HTML können wir auf ein Szenario stoßen, in dem div-Elemente mit „display: table-cell;“ Es fehlt der erwartete Abstand, der durch die Eigenschaft „margin“ eingeführt wird.

Ursache

Die Eigenschaft „margin“ ist nicht mit Elementen kompatibel, die andere Anzeigetypen als Tabellenüberschrift, Tabelle oder aufweisen Inline-Tabelle. Bedauerlicherweise fällt display: table-cell nicht unter diese Ausnahmen.

Lösung

Um diese Einschränkung zu umgehen, sollten Sie alternativ die Eigenschaft border-spacing verwenden. Es ist jedoch wichtig, den Randabstand auf ein übergeordnetes Element mit einem display:table-Layout anzuwenden, begleitet von border-collapse: getrennt.

HTML

<div><pre class="brush:php;toolbar:false"><div>

&l t;/div>

CSS

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

Mit diesem Setup können Sie kann Abstand zwischen den div-Elementen hinzufügen.

Horizontaler und vertikaler Rand Variationen

Darüber hinaus ermöglicht die Eigenschaft „Border-Spacing“ unabhängige Randwerte entlang der horizontalen und vertikalen Achse durch Angabe zweier unterschiedlicher Werte.

.../border-spacing:3px 5px;} /<em> 3px horizontal, 5px vertikal </em>/<br>

Das obige ist der detaillierte Inhalt vonWarum funktioniert der Rand nicht bei Divs mit „display: table-cell;' und wie kann ich Abstände hinzufügen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!