Pourquoi un div avec “display: table-cell;” n’est pas affecté par la marge?

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

Cause

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 .

Solution

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

Voir la démo de jsFiddle


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!