Pourquoi la marge ne fonctionne-t-elle pas sur les éléments de cellule de tableau ?

Pourquoi la marge échoue-t-elle sur les éléments de cellule de tableau ?

Malgré l'attribution d'une marge : 5px aux éléments div voisins avec display : table-cell, aucune marge n'apparaît. Quelle est la raison ?

Comprendre la cause

Selon la documentation MDN, la propriété margin exclut les éléments avec des types d'affichage de tableau, à l'exception de table-caption, table et inline-table. Par conséquent, margin est inefficace sur les éléments avec display: table-cell.

Résoudre le problème

Au lieu d'utiliser margin, envisagez d'utiliser la propriété border-spacing. Cette propriété s'applique aux éléments parents avec un affichage : disposition de la table et border-collapse : séparé.

Exemple de code

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

Personnalisation de la marge Valeurs

La propriété border-spacing peut également prendre deux valeurs, permettant des marges horizontales et verticales différentes.

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!