J’ai des éléments div
côte à côte avec display: table-cell;
.
Je veux définir une margin
entre eux, mais la margin: 5px
n’a aucun effet. Pourquoi?
Mon code:
1 1
De la documentation MDN :
[La propriété margin] s’applique à tous les éléments, à l’exception des éléments avec des types d’affichage de table autres que la légende de table, la table et la table en ligne
En d’autres termes, la propriété margin
ne s’applique pas à l’ display:table-cell
éléments de display:table-cell
.
Pensez à utiliser la propriété border-spacing
place.
Notez qu’il doit être appliqué à un élément parent avec un display:table
disposition de la display:table
et border-collapse:separate
.
Par exemple:
HTML
123 456 879
CSS
.table {display:table;border-collapse:separate;border-spacing:5px;} .row {display:table-row;} .cell {display:table-cell;padding:5px;border:1px solid black;}
Marge différente horizontalement et verticalement
Comme mentionné par Diego Quirós, la propriété border-spacing
accepte également deux valeurs pour définir une marge différente pour les axes horizontal et vertical.
Par exemple
.table {/*...*/border-spacing:3px 5px;} /* 3px horizontally, 5px vertically */
Vous pouvez utiliser des divs internes pour définir la marge.
1 1
JS Fiddle
Si vous ne disposez pas de bordures, vous pouvez utiliser des bordures transparentes au lieu de marges:
div { display: table-cell; border: 5px solid transparent; }
Note: vous ne pouvez pas utiliser les pourcentages ici … 🙁
Si tu as div après l’autre comme ça
Cela devrait fonctionner!