¿Por qué es un div con "display: table-cell;" no afectado por el margen?

Tengo divelementos uno al lado del otro con display: table-cell;.

Quiero establecer marginentre ellos, pero margin: 5pxno tiene ningún efecto. ¿Por qué?

Mi código:

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

Porque

De la documentación de MDN :

[La propiedad de margen] se aplica a todos los elementos, excepto los elementos con tipos de visualización de tabla distintos de table-caption, table y inline-table

En otras palabras, la marginpropiedad no es aplicable adisplay:table-cell elementos.

Solución

Considere usar la border-spacingpropiedad en su lugar.

Tenga en cuenta que debe aplicarse a un elemento padre con un display:tablediseño y border-collapse:separate.

Por ejemplo:

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

Ver demostración de jsFiddle

Diferente margen horizontal y verticalmente

Como mencionó Diego Quirós, la border-spacingpropiedad también acepta dos valores para establecer un margen diferente para los ejes horizontal y vertical.

Por ejemplo

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

Puede usar divs internos para establecer el margen.

<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

Las celdas de la tabla no respetan el margen, pero en su lugar puede usar bordes transparentes:

div {
  display: table-cell;
  border: 5px solid transparent;
}

Nota: no puede usar porcentajes aquí ... :(

Si tienes div uno al lado del otro como este

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

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

</div>

¡Esto debería funcionar!