Dlaczego div z „display: table-cell;” margines nie ma wpływu?

Mam divelementy obok siebie display: table-cell;.

Chcę ustawić marginmiędzy nimi, ale margin: 5pxnie ma to żadnego efektu. Czemu?

Mój kod:

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

Przyczyna

Z dokumentacji MDN :

[Właściwość marginesu] dotyczy wszystkich elementów z wyjątkiem elementów o typach wyświetlania tabeli innych niż podpis tabeli, tabela i tabela wbudowana

Innymi słowy, marginwłaściwość nie ma zastosowania do display:table-cellelementów.

Rozwiązanie

border-spacingZamiast tego rozważ użycie właściwości.

Uwaga: należy go zastosować do elementu nadrzędnego z display:tableukładem i border-collapse:separate.

Na przykład:

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

Zobacz demo jsFiddle

Różne marginesy w poziomie i w pionie

Jak wspomniał Diego Quirós, border-spacingwłaściwość przyjmuje również dwie wartości, aby ustawić inny margines dla osi poziomej i pionowej.

Na przykład

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

Możesz użyć wewnętrznych div, aby ustawić margines.

<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

Komórki tabeli nie uwzględniają marginesów, ale zamiast tego można użyć przezroczystych ramek:

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

Uwaga: nie możesz tutaj użyć wartości procentowych ... :(

Jeśli masz div obok siebie w ten sposób

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

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

</div>

To powinno działać!