Pourquoi un div avec "display: table-cell;" pas affecté par la marge?

Question

J'ai div éléments côte à côte avec display: table-cell; .

Je veux définir margin entre eux, mais margin: 5px n'a aucun effet. Pourquoi?

Mon code:

 <div style="display: table-cell; margin: 5px; background-color: red;">1</div>
<div style="display: table-cell; margin: 5px; background-color: green;">1</div>
 

Answer 1

Cause

À partir de la MDN de la documentation:

[La propriété de marge] s'applique à tous les éléments, à l'exception des éléments avec affichage de la table des types autres que de table-caption, table et inline-table

En d'autres termes, l' margin de la propriété n'est pas applicable à l' display:table-cell - éléments.

Solution

Envisager l'utilisation de l' border-spacing la propriété à la place.

Remarque il doit être appliqué à un élément parent avec un display:table mise en page et de l' border-collapse:separate.

Par exemple:

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

Voir jsFiddle démo

Answer 2

Vous pouvez utiliser des divs internes pour définir la marge.

 <div style="display: table-cell;">
   <div style="margin:5px;background-color: red;">1</div>
</div>
<div style="display: table-cell; ">
  <div style="margin:5px;background-color: green;">1</div>
</div>
 

JS Fiddle

Answer 3

Si tu as div après l'autre comme ça

 <div id="1" style="float:left; margin-right:5px">

</div>
<div id="2" style="float:left">

</div>
 

Cela devrait fonctionner!