Warum funktioniert der Rand nicht bei Tabellenzellenelementen?

Warum schlägt der Rand bei Tabellenzellenelementen fehl?

Obwohl margin: 5px benachbarten div-Elementen mit display: table-cell zugewiesen wird, wird kein Rand angezeigt. Was ist der Grund?

Verstehen der Ursache

Laut der MDN-Dokumentation schließt die Margin-Eigenschaft Elemente mit Tabellenanzeigetypen aus, mit Ausnahme von table-caption, table und inline-table. Daher ist der Rand bei Elementen mit display: table-cell wirkungslos.

Lösung des Problems

Anstatt den Rand zu verwenden, sollten Sie die Border-Spacing-Eigenschaft verwenden. Diese Eigenschaft gilt für übergeordnete Elemente mit einer Anzeige: Tabellenlayout und Rahmenreduzierung: getrennt.

Beispielcode

HTML

<div class="table">
  <div class="row">
    <div class="cell">123</div>
    <div class="cell">456</div>
    <div class="cell">879</div>
  </div>
</div>

CSS

.table {
  display: table;
  border-collapse: separate;
  border-spacing: 5px;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  padding: 5px;
  border: 1px solid black;
}

Rand anpassen Werte

Die Eigenschaft border-spacing kann auch zwei Werte annehmen, wodurch unterschiedliche horizontale und vertikale Ränder möglich sind.

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

Das obige ist der detaillierte Inhalt vonWarum funktioniert der Rand nicht bei Tabellenzellenelementen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!