div elementler yanyana display: table-cell; var.

Aralarında margin koymak isterim, ama margin: 5px hiçbir etkisi olmaz. Neden?

Benim 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>

Neden

the MDN documentation:

[Kenar boşluğu özelliği] elemanları hariç tüm elementler için geçerlidir ile tablo türleri tablo-başlık dışında, tablo ve satır içi tablo görüntüler

Diğer bir deyişle, margin malıdırdeğildisplay:table-cell elementler için geçerlidir.

Çözüm

Bunun yerine border-spacing özelliğini kullanmayı düşünün.

display:table bir düzen ve border-collapse:separate ile ana öğe için uygulanması gerekir.

Örneğin:

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

jsFiddle demo bkz

Farklı kenar yatay ve dikey olarak

Diego Quirós tarafından belirtildiği gibi, border-spacing özelliği de iki değer yatay ve dikey eksen için farklı bir kenar boşluğu ayarlamak için kabul eder.

Örneğin

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