div (üstdiv başka içeren) (çocuk). Üst özel bir CSS stili ile body ilk unsurdur. Başladığım zaman

.child
{
    margin-top: 10px;
}

Sonuçta çocuğumun en üst ile uyumlu olmasıdır. Çocuk 10px için aşağıya kaymıştır olmak yerine, ailemin 10px aşağı taşır.

Benim DOCTYPE 10* *olarak ayarlanmıştır.

Burada neyi kaçırıyorum?

1 düzenleyin
Benim üst yukarıdan aşağıya (piksel) mükemmel bunun altında görüntülenecek olan bir arka plan vardır, çünkü kesinlikle tanımlanmış boyutlara sahip olması gerekir. Böylece dikey kenar boşluklarını ayarlamahayır.

2 düzenleyin
Bu davranış FF aynı gibi YANİ CR.

Buldum da ekleyebilirsiniz Child elements with margins within DIVs alternatif:

.parent { overflow: auto; }

ya da:

.parent { overflow: hidden; }

Bu collapse kenar boşluklarını önler. Kenarlık ve dolgu aynı. Bu nedenle, aşağıdakileri de üst marj bir çöküşü engellemek için kullanabilirsiniz:

.parent {
    padding-top: 1px;
    margin-top: -1px;
}

Yoğun istek üzerine güncelleme: Çöken boşluklarını amacı metinsel içerik ilgileniyor. Örneğin:

<style type="text/css">
    h1, p, ul {
        margin-top: 1em;
        margin-bottom: 1em;
    }
</style>

<h1>Title!</h1>
<div>
    <p>Paragraph</p>
    <ul>
        <li>list item</li>
    </ul>
</div>

Tarayıcı kenar boşlukları çöker çünkü, metin beklediğiniz gibi görünür. Her öğe etrafında boşluk var sağlar, ama aralığı iki katına olmayacak. <h1> <p> sınırları ekleyin, ama sonu değil. Aynı <p> <ul> elemanı için olacak.

Ne yazık ki, modern tasarımları ile bu fikrin açıkça bir kap istediğinizde sizi ısırabilir. Bu CSS block formatting context yeni bir konuşma denir. overflow veya teminat hile size verecektir.