Pourquoi la marge ne fonctionne-t-elle pas sur les éléments « display : table-cell » ?

Élément insensible à la marge

Problème

Divs adjacents formatés avec affichage : cellule-tableau; ne sont pas affectés par la propriété margin, même lorsqu'elle est définie sur une valeur de 5px.

Explanation

Selon la documentation MDN, la propriété margin ne s'applique pas aux éléments avec les types d'affichage de tableau, à l'exception de la légende du tableau, du tableau et du tableau en ligne. Par conséquent, cela ne peut pas affecter les éléments avec display:table-cell.

Solution

Pour obtenir un espacement entre ces éléments, utilisez la propriété border-spacing. Cependant, cela nécessite d'appliquer display:table et border-collapse:separate à l'élément parent.

Par exemple :

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

En utilisant la propriété border-spacing et en ajustant la border-collapse et les paramètres d'affichage, vous pouvez créer efficacement des marges entre les éléments div stylisés comme display : table-cell;.

Fonctionnalité avancée

Comme l'a noté Diego Quirós, la propriété border-spacing vous permet de définir différentes valeurs de marge pour les axes horizontal et vertical. . Par exemple :

.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!