Heim >Web-Frontend >CSS-Tutorial >Warum funktioniert der Rand nicht bei „display: table-cell'-Elementen?

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

Susan Sarandon
Susan SarandonOriginal
2024-12-13 06:32:14757Durchsuche

Why Doesn't Margin Work on `display: table-cell` Elements?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn