Başka bir div içinde bir div marj değerleri ekleme yaptım. Tüm işleri üst değer dışında iyi, göz ardı gibi görünüyor. Ama neden?

Beklediğim gibi:

Ne aldı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 bu şekilde davranmasına neden için bir açıklama yok.

Sen şu an gördüğünüz üst kenar boşluğu #inner eleman collapse içine üst kenar #outer öğesi, bırakarak sadece #outer marj sağlam (gerçi gösterilmeyen görüntüleri). Hem kutuların üst kenarları marjlarını eşit olduğundan aynı hizada.

İşte W3C spec ilgili puan:

8.3.1 boşlukları Daraltma

CSS, iki veya daha fazla kutuları olabilir veya kardeşleri olabilir) bitişik kenar boşlukları tek bir kenar oluştururlar. Bu arada o boşlukları söyleniyorçöküşve çıkan kombine marjı denirmarj çöktü.

Komşu dik kenar boşlukları daraltmak[...]

İki kenar boşlukları vardırbitişikve yalnızca:

• hem ait akış blok düzeyi aynı blokta biçimlendirme bağlam katılan kutuları
• hat kutuları, hiçbir boşluk, hiçbir dolgu ve kenarlık yok onları ayırmak yok
• hem de dikey olarak bitişik ait kutu kenarları, yani aşağıdaki çiftleri bir form:
  • ilk kutu ve bir üst marj üst kenar boşluğu akış çocuk

Aşağıdakilerden birini yapmak neden çöküyor: kenar önler

• div elementler ya da yüzer
• div elementlerin ya da yapmak 17**
• overflow of #outer to auto (veya herhangi bir değer visible dışında) ayarı

Çünkü:

• Kutusu ve diğer kutu süzülüyor arasındaki boşlukları çökmesi (hatta bir şamandıra ve akış çocukların kendi arasında).
• Yeni blok biçimlendirme bağlamlarda (yüzer gibi ve 'taşma' diğer 'görünür') ile daralmıyor akış çocuklar. daha öğelerini oluşturan öğeler kenar boşlukları
• Inline-block kenar boşlukları kutuları daralmıyor (kendi ile akış çocuklar bile).

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

Asla yıkılmamayı yatay kenar boşlukları.