div'ler arasındaki boşluk - tablo hücresini görüntüle

Burada iki div var:

<div style="display:table-cell" id="div1">
    content
</div>

<div style="display:table-cell" id="div2">
    content
</div>

Bu iki div arasında boşluk bırakmanın bir yolu var display:table-cellmı?

border-spacingMülkü kullanabilirsiniz :

HTML:

<div class="table">
    <div class="row">
        <div class="cell">Cell 1</div>
        <div class="cell">Cell 2</div>
    </div>
</div>

CSS:

.table {
  display: table;
  border-collapse: separate;
  border-spacing: 10px;
}

.row { display:table-row; }

.cell {
  display:table-cell;
  padding:5px;
  background-color: gold;
}

JSBin Demosu

Başka bir seçenek var mı?

Aslında değil.

Neden?

• marginmülkiyet geçerli değildir için display: table-cellelemanlar.
• padding özelliği, hücrelerin kenarları arasında boşluk oluşturmaz.
• floatözellik table-cell, üst öğeleri kadar uzun olabilen öğelerin beklenen davranışını yok eder .

Mümkünse şeffaf kenarlıklar kullanın.

JSFiddle Demosu

https://jsfiddle.net/74q3na62/

HTML

<div class="table">
    <div class="row">
        <div class="cell">Cell 1</div>
        <div class="cell">Cell 2</div>
        <div class="cell">Cell 3</div>
    </div>
</div>

CSS

.table {
  display: table;
  border: 1px solid black;
}

.row { display:table-row; }

.cell {
  display: table-cell;
  background-clip: padding-box;
  background-color: gold;
  border-right: 10px solid transparent;
}

.cell:last-child {
  border-right: 0 none;
}

Açıklama

border-spacingÖzelliği, kabul edilen yanıtın önerdiği gibi kullanabilirsiniz , ancak bu yalnızca tablo hücreleri arasında değil, aynı zamanda tablo hücreleri ile tablo kabı arasında da boşluk oluşturur. Bu istenmeyen olabilir.

Tablo hücrelerinizde görünür kenarlıklara ihtiyacınız yoksa, transparenthücre kenar boşlukları oluşturmak için kenarlıkları kullanmalısınız . Saydam sınırların ayarlanması gerekir, background-clip: padding-box;çünkü aksi takdirde tablo hücrelerinin arka plan rengi kenarlıkta görüntülenir.

Şeffaf kenarlıklar ve arka plan klibi, IE9'da (ve diğer tüm modern tarayıcılarda) desteklenir. IE8 uyumluluğuna ihtiyacınız varsa veya gerçek şeffaf alana ihtiyacınız yoksa, beyaz bir sınır rengi ayarlayabilir ve background-clipdışarıda bırakabilirsiniz .

<div style="display:table;width:100%"  >
<div style="display:table-cell;width:49%" id="div1">
content
</div>

<!-- space between divs - display table-cell -->
<div style="display:table-cell;width:1%" id="separated"></div>
<!-- //space between divs - display table-cell -->

<div style="display:table-cell;width:50%" id="div2">
content
</div>
</div>

Yukarıdakiler işe yarıyor, işte biraz daha az işaretleme gerektiren ve daha esnek olan çözümüm.

.cells {
  display: inline-block;
  float: left;
  padding: 1px;
}
.cells>.content {
  background: #EEE;
  display: table-cell;
  float: left;
  padding: 3px;
  vertical-align: middle;
}

<div id="div1" class="cells"><div class="content">My Cell 1</div></div>
<div id="div2" class="cells"><div class="content">My Cell 2</div></div>

Adı ne olursa olsun (sadece tablo bölme kullanacağım) yeni bir div oluşturun ve ona içerik eklemeden, onu ayrılması gereken gerekli div'ler arasına yerleştirerek bir genişlik verin.

Gerekli bulduğunuz genişliği ekleyebilirsiniz. Sadece% 0,6 kullandım çünkü bunu yapmam gerektiğinde ihtiyacım olan buydu.

.table-split {
  display: table-cell;
  width: 0.6%
}

<div class="table-split"></div>