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

sintomas despues de un preinfarto

Question

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

Quiero establecer un margin entre ellos, pero el margin: 5px no 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>

Answer 1

Porque

De la documentación de MDN :

[La propiedad de margen] se aplica a todos los elementos excepto a los elementos con tipos de visualización de tabla distintos de tabla-título, tabla y tabla en línea

En otras palabras, la propiedad de margin no es aplicable para display:table-cell elementos de display:table-cell .

Solución

Considere usar la propiedad de border-spacing lugar.

Tenga en cuenta que debe aplicarse a un elemento principal con una display:table diseño de display:table 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 demo jsFiddle

Diferente margen horizontal y verticalmente.

Como lo menciona Diego Quirós, la propiedad de border-spacing 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 */

Answer 2

Puedes 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

Answer 3

Si no tiene bordes, puede usar bordes transparentes en lugar de márgenes:

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

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

Answer 4

Si tienes div al lado como este

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

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

</div>

¡Esto debería funcionar!