Dlaczego ten styl CSS margin-top nie działa?

Spróbuj użyć display: inline-block; na wewnętrznym div.

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

To, o czym wspomniał @BoltClock, jest dość solidne. I tutaj chcę tylko dodać kilka innych rozwiązań tego problemu. sprawdź to w3c_collapsing margin . Zielone części są potencjalną myślą, jak ten problem można rozwiązać.

Rozwiązanie 1

Marginesy pomiędzy pływającym pudełkiem a dowolnym innym pudełkiem nie zapadają się (nawet między pływającym a jego dziećmi w przepływie).

Oznacza to, że mogę dodać float:left do #outer lub #inner demo1 .

Zwróć również uwagę, że float unieważni auto na marginesie.

Rozwiązanie 2

Marginesy elementów, które tworzą nowe konteksty formatowania bloków (takie jak pływaki i elementy z "przepełnieniem" innym niż "widoczny") nie zapadają się wraz z ich potomkami in-flow.

Inne niż visible, dodajmy overflow: hidden do #outer. A ten sposób wydaje się dość prosty i przyzwoity. Podoba mi się.

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

Rozwiązanie 3

Marginesy absolutnie umieszczonych pudełek nie zapadają się (nawet z ich dziećmi w przepływie).

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

Lub

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

Te dwie metody przerwą normalny przepływ div

Rozwiązanie 4

Marginesy skrzynek inline-block nie zapadają się (nawet w przypadku dzieci in-flow).

To to samo co @enderskill

Rozwiązanie 5

Dolny margines element na poziomie bloku w przepływie zawsze zapada się z górnym marginesem jego następnego rodzeństwa na poziomie bloku w przepływie, chyba że rodzeństwo ma prześwit.

Rozwiązanie 6

Górny margines elementu blokowego w przepływie zwija się z górnym marginesem dziecka na poziomie pierwszego bloku w przepływie, jeśli element nie ma górnej krawędzi, górnej wyściółki, a dziecko nie ma prześwitu.

To jest bardzo interesujące i mogę po prostu dodać jedną górną linię graniczną

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

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

}

A także <div> jest domyślnym poziomem bloku, więc nie musisz go deklarować celowo. Sorry za nie jest w stanie opublikować więcej niż 2 Linki i zdjęcia ze względu na moją reputację nowicjusza. Przynajmniej wiesz, skąd ten problem bierze się następnym razem. coś podobnego.

Nie wiem dlaczego to co masz nie działa, ale możesz dodać

overflow: auto;

Do zewnętrznego div.

Jeśli dodasz jakieś wypełnienie do #outer, to działa.

Demo

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

Nie do końca wiem dlaczego, ale zmieniając wewnętrzny CSS na

display:inline-block;

Wydaje się działać;

Nie odpowiada "dlaczego" (musi być coś z marginesem załamania), ale wydaje się, że najprostszym / najbardziej logicznym sposobem na zrobienie tego, co próbujesz zrobić, byłoby po prostu dodanie padding-top do zewnętrznego div :

Http://jsfiddle.net/hpU5d/1/

Minor note - nie powinno być konieczne ustawianie div na display:block;, chyba że w Twoim kodzie jest coś innego, co mówi, że nie ma być block.

Spróbuj tego:

#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/

Powodzenia

Myślę, że ustawienie pozycji właściwości #innerdiv na relative może również pomóc w osiągnięciu efektu. Ale tak czy inaczej próbowałem oryginalnego kodu wklejonego w Pytaniu na IE9 i najnowszym Google Chrome i już dają pożądany efekt bez żadnych modyfikacji.

Użyj padding-top:50px do zewnętrznego div. Coś takiego:

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

Uwaga: padding zwiększy rozmiar Twojego div. W tym przypadku, jeśli rozmiar Twojego div jest ważny, mam na myśli, czy musi mieć określoną wysokość. zmniejsz wysokość o 50px.:

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

Próbowałeś?ważne przede wszystkim, to wszystko wymusi:

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