Warum funktionieren Ränder bei Divs mit „display: table-cell;' nicht?

Warum Divs nicht mit „display: table-cell;“ möglich sind Ränder anwenden?

In HTML sind Divs benachbarte Elemente, die mithilfe von CSS-Layouteinstellungen wie „Anzeige“ angeordnet werden können. Bei der Zuweisung von „display: table-cell;“ verhalten sich diese Divs wie Zellen in einer Tabelle und erben bestimmte Eigenschaften. Eine solche Eigenschaft ist die Unwirksamkeit der Margin-Eigenschaft.

Ursache: Inkompatibilität mit „display: table-cell;“

Laut MDN-Dokumentation ist „Margin“ nicht auf Elemente mit Tabellenanzeigetypen anwendbar außer „table-caption“, „table“ und „inline-table“. „Anzeige: Tabellenzelle;“ Fällt unter diese Ausnahme und ist daher nicht mit margin kompatibel.

Lösung: Border-Spacing-Eigenschaft

Anstatt margin zu verwenden, sollten Sie die Anwendung von border-spacing in Betracht ziehen, um den Abstand zwischen Divs zu erreichen. Diese Eigenschaft muss jedoch auf ein übergeordnetes Element mit einem „display:table“-Layout und „border-collapse:“ angewendet werden. getrennt".

Beispiel:

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

Siehe jsFiddle Demo

Marginvariation auf horizontalen und vertikalen Achsen

Wie von Diego Quieros erwähnt, unterstützt der Rahmenabstand zwei Werte, um unterschiedliche Ränder für die horizontale und vertikale Achse zu erstellen.

Beispiel:

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

Das obige ist der detaillierte Inhalt vonWarum funktionieren Ränder bei Divs mit „display: table-cell;' nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!