Neden "display: table-cell;" marjdan etkilenmez mi?

211

Yanımda divelemanları var display: table-cell;.

marginAralarında ayarlamak istiyorum , ancak margin: 5pxhiçbir etkisi yok. Neden?

Kodum:

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

html css

— user1929946
kaynak

310

Sebep olmak

Gönderen MDN belgelerinde :

[Margin özelliği], tablo başlığı, tablo ve satır içi tablo dışında tablo görüntüleme türlerine sahip öğeler dışındaki tüm öğeler için geçerlidir

Başka bir deyişle, marginözellik öğeler için geçerli değildirdisplay:table-cell .

Çözüm

border-spacingBunun yerine özelliği kullanmayı düşünün .

Bir display:tablemizanpajlı bir üst öğeye uygulanması gerektiğini unutmayın border-collapse:separate.

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

Bkz. JsFiddle demosu

Yatay ve dikey olarak farklı kenar boşluğu

Diego Quirós tarafından belirtildiği gibi, border-spacingmülk yatay ve dikey eksenler için farklı bir kenar boşluğu ayarlamak için iki değeri kabul eder.

Örneğin

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

— Boaz
kaynak

6

Teşekkürler! Yatay ve dikey alanın farklı kenar boşlukları olması gerektiğinde de bu gösterim vardır: yatay dikey;

— Diego Quirós

Ve bir hata bulduğumu sanıyordum; daha fazla CSS öğrenmem gerekiyor.

— Pete Alvin

Sanırım bu gerçekten sol / sağ / üst / alt kenar boşluklarını işlemiyor mu? Ve belirli bir tablo hücresinin diğerlerinden farklı dolgulara sahip olmasının hiçbir yolu yok mu?

— Nathan

@Nathan padding, her zamanki gibi gerekli herhangi bir seçici (örneğin, sınıf veya kimlik) için ayarlanabilir. marginHücreler arasında demek isterseniz , bu iki değeri ayarlayarak dikey ve yatay eksenler için ayrı ayrı ayarlanabilir border-spacing, ancak tek tek hücrelere değil tüm tabloya uygulanır.

— Boaz

21

Kenar boşluğunu ayarlamak için iç div öğelerini kullanabilirsiniz.

<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

— urmurmur
kaynak

2

Hücreler arasında kenar boşluğu olmasını ancak sol veya sağ olmasını istemiyorsanız bu iyi bir fikirdir. O zaman CSS'niz böyle bir şey olabilir .inner-div { margin-right: 5px; } .outer-cell:last-child .inner-div { margin-right: 0; }. Ancak şunu da unutmayın: Bu örneğin kırmızı ve yeşil arka planları, hücrelerde olmadıkları için mutlaka yükseklikte eşleşmeyecektir.

— Henrik N

8

Tablo hücreleri kenar boşluğuna saygı duymaz, bunun yerine saydam kenarlıklar kullanabilirsiniz:

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

Not: Yüzdeleri burada kullanamazsınız ... :(

— Chris Mutlu
kaynak

2

Birbirinizdeki div gibi böyle varsa

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

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

</div>

Bu çalışmalı!

— user123_456
kaynak

10

Tamam, ya eşit yükseklikte iki div isterse? Float bunu yapamaz.

— hieroshima

JS bu yüzden harika :)

— Chris Happy

@ChrisHappy Bir CSS çözümü olduğunda asla JavaScript kullanmayın. Kodunuz hantal hale geliyor.

— ssc-hrep3

@ ssc-hrep3 Duyarlılık talep edildiğinde, hantal CSS çözümleri artık yeterli değil ...

— Chris Happy

2

Yeterli - özellikle duyarlı gereksinimlerle. Sadece büyük tarayıcıların çoğu tarafından desteklenen ve bu sorunu çok kolay bir şekilde çözen flexbox'a bir göz atın . Mizanpaj stilleri asla JavaScript tarafından yapılmamalıdır.

— ssc-hrep3