Bu CSS kenar boşluğu stili neden çalışmıyor?

Başka bir div içindeki div'a kenar boşluğu değerleri eklemeye çalışıyorum. En yüksek değer dışındaki tüm işler iyi çalışıyor, göz ardı ediliyor gibi görünüyor. Ama neden?

Beklediğim:

Ne alırım:

Kod:

#outer {
    	width: 500px; 
    	height: 200px; 
    	background: #FFCCCC;
    	margin: 50px auto 0 auto;
    	display: block;
}
#inner {
    	background: #FFCC33;
    	margin: 50px 50px 50px 50px;
    	padding: 10px;
    	display: block;
}

<div id="outer">
  <div id="inner">
  	Hello world!
  </div>
</div>

W3Schools'un marjın neden bu şekilde davrandığına dair bir açıklaması yoktur.

Aslında, #inneröğenin üst kenar boşluğunun öğenin üst kenarına daraldığını görüyorsunuz ve #outeryalnızca #outerkenar boşluğunu olduğu gibi bırakıyorsunuz (resimlerinizde gösterilmese de). Her iki kutunun üst kenarları birbirine eşit hizalıdır çünkü kenar boşlukları eşittir.

W3C spesifikasyonunun ilgili noktaları:

8.3.1 Çökme marjları

CSS'de, iki veya daha fazla kutunun bitişik kenar boşlukları (kardeş olabilir veya olmayabilir) tek bir kenar boşluğu oluşturmak için birleşebilir. Bu şekilde birleştirilen kenar boşluklarının çöktüğü söylenir ve ortaya çıkan birleşik kenar boşluğuna daraltılmış kenar boşluğu denir .

Bitişik dikey kenar boşlukları daraltma [...]

İki kenar boşluğu yalnızca aşağıdaki durumlarda bitişiktir :

• her ikisi de aynı blok biçimlendirme bağlamına katılan akış içi blok düzeyi kutulara aittir
• çizgi kutusu yok, boşluk yok, dolgu yok ve kenar yok
• her ikisi de dikey olarak bitişik kutu kenarlarına aittir, yani aşağıdaki çiftlerden birini oluşturur:
  • bir kutunun üst kenar boşluğu ve ilk akış içi çocuğunun üst kenar boşluğu

Kenar boşluğunun daralmasını önlemek için aşağıdakilerden herhangi birini yapabilirsiniz:

• divÖğelerinizden birini kaydırın
• divÖğelerinizden birini satır içi bloklar yapın
• Set overflowof #outeriçinauto (veya dışında bir değer, diğer visible)

Yukarıdaki seçeneklerin kenar boşluğunun daralmasını önlemesinin nedeni:

• Yüzen bir kutu ile diğer herhangi bir kutu arasındaki kenar boşlukları çökmez (bir şamandıra ile akış içi çocuklar arasında bile).
• Yeni blok biçimlendirme bağlamları oluşturan öğelerin kenar boşlukları (şamandıralar ve 'görünür' dışında 'taşma' olan öğeler) akış içi çocuklarıyla daralmaz.
• Satır içi blok kutuların kenar boşlukları çökmez (akış içi çocuklarında bile).

Sol ve sağ kenar boşlukları beklediğiniz gibi davranır çünkü:

Yatay kenar boşlukları asla çökmez.

display: inline-block;İç div üzerinde kullanmayı deneyin .

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:block;
}
#inner {
    background:#FFCC33;
    margin:50px 50px 50px 50px;
    padding:10px;
    display:inline-block;
}

@BoltClock'un bahsettikleri oldukça sağlam. Ve burada sadece bu soruna birkaç çözüm daha eklemek istiyorum. bu w3c_collapsing kenar boşluğunu kontrol edin . Yeşil kısımlar, bu sorunun nasıl çözülebileceği konusunda potansiyel düşüncedir.

Çözüm 1

Yüzen bir kutu ile diğer herhangi bir kutu arasındaki kenar boşlukları çökmez (bir şamandıra ile akış içi çocuklar arasında bile).

bu float:leftda #outerya #inner demo1 'i ekleyebileceğim anlamına gelir .

Ayrıca , marjın floatgeçersiz kılınacağına dikkat edin auto.

Çözüm 2

Yeni blok biçimlendirme bağlamları oluşturan öğelerin kenar boşlukları (şamandıralar ve 'görünür' dışında 'taşma' olan öğeler) akış içi çocuklarıyla daralmaz.

başka visible, overflow: hiddeniçine koyalım #outer. Ve bu şekilde oldukça basit ve iyi görünüyor. Bunu sevdim.

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    overflow: hidden;
}
#inner {
    background: #FFCC33;
    height: 50px;
    margin: 50px;
}

Çözüm 3

Kesinlikle konumlandırılmış kutuların kenar boşlukları çökmez (akış içi çocuklarında bile).

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    position: absolute; 
}
#inner{
    background: #FFCC33;
    height: 50px;
    margin: 50px;
}

veya

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    position: relative; 
}
#inner {
    background: #FFCC33;
    height: 50px;
    margin: 50px;
    position: absolute;
}

bu iki yöntem normal akışını div

Çözüm 4

Satır içi blok kutuların kenar boşlukları çökmez (akış içi çocuklarında bile).

@enderskill ile aynı

Çözüm 5

Akış içi blok düzeyindeki bir öğenin alt kenar boşluğu, bu kardeşte boşluk olmadığı sürece, bir sonraki akış içi blok düzeyindeki kardeşinin üst kenar boşluğu ile daima çöker.

Kardeşler arasındaki çöküş marjı olduğu için bunun soru ile ilgisi yoktur. genellikle bir üst kutunun margin-bottom: 30pxve bir kardeş kutunun olup olmadığı anlamına gelir margin-top: 10px. Aralarındaki toplam marj 30pxyerine 40px.

Çözüm 6

Bir akış içi blok öğesinin üst kenar boşluğu, öğenin üst sınırı yoksa, üst dolgusu yoksa ve çocuğun boşluğu yoksa, ilk akış içi blok seviyesi çocuğun üst kenar boşluğu ile çöker.

Bu çok ilginç ve sadece bir üst kenarlık çizgisi ekleyebilirim

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    border-top: 1px solid red;

}
#inner {
    background: #FFCC33;
    height: 50px;
    margin: 50px;

}

Ve ayrıca <div>varsayılan olarak blok seviyesidir, bu yüzden bilerek bildirmeniz gerekmez. Acemi itibarım nedeniyle 2'den fazla bağlantı ve resim yayınlayamadığım için üzgünüm. En azından benzer bir şey gördüğünüzde sorunun nereden geldiğini biliyorsunuz.

Sahip olduklarınızın neden işe yaramadığından emin değilsiniz, ancak

overflow: auto;

dış div.

Herhangi bir dolgu eklerseniz #outer, çalışır.

gösteri

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:block;
    padding-top:1px;
}

Neden olduğundan tam olarak emin değilim, ancak iç CSS'yi

display:inline-block;

işe yarıyor gibi görünüyor;

"Neden" e cevap vermez (marj çöküşü olan bir şey olmalı), ama yapmaya çalıştığınız şeyi yapmanın en kolay / mantıklı yolu sadece dış div'e eklemek padding-topolacaktır :

http://jsfiddle.net/hpU5d/1/

Küçük not - display:block;kodunuzda blok olmamasını söyleyen başka bir şey olmadığı sürece bir div ayarlamak gerekli değildir.

bunu dene:

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:table;
}
#inner {
    background:#FFCC33;
    margin:50px 50px 50px 50px;
    padding:10px;
    display:block;
}​

http://jsfiddle.net/7AXTf/

İyi şanslar

Sanırım #inner div'in position özelliğinin göreceli olarak ayarlanması da etkiyi elde etmenize yardımcı olabilir. Ama yine de IE9 ve en son Google Chrome'daki soruya yapıştırılan orijinal kodu denedim ve herhangi bir değişiklik yapmadan arzu edilen etkiyi zaten veriyorlar.

padding-top:50pxDış bölme için kullanın . Bunun gibi bir şey:

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:table;}

Not: dolgu, div'inizin boyutunu artıracaktır. Bu durumda div'inizin boyutu önemliyse, yani belirli bir yüksekliğe sahip olması gerekiyor. yüksekliği 50 piksel azaltın .:

#outer {
    width:500px; 
    height:150px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:table;}

Her şeyden önce önemli, her şeyi zorlayacak:

margin:50px 50px 50px 50px !important;

Sadece hızlı bir düzeltme için alt öğelerinizi divböyle bir öğeye sarmayı deneyin -

<div id="outer">
   <div class="divadjust" style="padding-top: 1px">
      <div id="inner">
         Hello world!
      </div>
   </div>
</div>

Marj innerdiv dolgu nedeniyle çöküş olmaz 1pxarada outerve innerdiv. Yani mantıklı olarak 1pxvarolan innerdiv marjı ile birlikte ekstra alana sahip olacaksınız .