Warum funktioniert der Rand nicht bei „display: table-cell'-Elementen?

Element unempfindlich gegenüber Rand

Problem

Angrenzende Divs mit Anzeige formatiert : Tabellenzelle; bleiben von der Margin-Eigenschaft unberührt, auch wenn sie auf einen Wert von 5 Pixel eingestellt ist.

Explanation

Laut MDN-Dokumentation gilt die Margin-Eigenschaft nicht für Elemente mit Tabellenanzeigetypen außer „table-caption“, „table“ und „inline-table“. Folglich kann es sich nicht auf Elemente mit display:table-cell auswirken.

Lösung

Um einen Abstand zwischen diesen Elementen zu erreichen, verwenden Sie die Eigenschaft „border-spacing“. Dies erfordert jedoch die Anwendung von display:table und border-collapse:separate auf das übergeordnete Element.

Zum Beispiel:

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

Indem Sie die Eigenschaft border-spacing verwenden und anpassen Mithilfe der Border-Collapse- und Anzeigeeinstellungen können Sie effektiv Ränder zwischen div-Elementen erstellen, die als Anzeige formatiert sind: table-cell;.

Erweiterte Funktionalität

Wie von Diego Quirós erwähnt, können Sie mit der Eigenschaft „Border-Spacing“ unterschiedliche Randwerte für horizontale und vertikale Achsen definieren . Zum Beispiel:

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

Das obige ist der detaillierte Inhalt vonWarum funktioniert der Rand nicht bei „display: table-cell'-Elementen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!