SORU
1 Mart 2012, PERŞEMBE


Neden bu CSS-üst kenar boşluğu stil çalışmıyor mu?

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:
What I expected with margin:50px 50px 50px 50px;

Ne aldım:
What I get with margin:50px 50px 50px 50px;

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.

CEVAP
1 Mart 2012, PERŞEMBE


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ı.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • MC JIN'S OLD YouTube CHANNEL

    MC JIN'S OLD

    2 Kasım 2008
  • Jonathan D.

    Jonathan D.

    3 Kasım 2006
  • sinumatic

    sinumatic

    19 Aralık 2006