Jeśli element jest pierwszym potomkiem, doda margin-top do elementu nadrzędnego, zwijając się z margin-top elementu nadrzędnego.

Dlaczego czasami margines się nie zapada jest wyraźnie powiedziane w W3 collapsing-margins Sekcja .

Zalecam użycie padding-top lub tego obejścia: Margin on child element moves parent element , Ponieważ overflow: hidden może dodać dodatkowe obrażenia.

Zobacz ten przykład: fiddle

HTML:

<div id="outside">
    <div id="div1">
        <h1>margin in parent</h1>
    </div>

    <div id="div2">&nbsp;
        <h1>margin inside</h1>
    </div>
</div>

CSS:

#outside {
    background-color: #ccc;
    border:1px solid #000;
}
#div1 {
  background-color: #66d;
}
#div1 h1 {
  margin: 20px 0 0 0;
}
#div2 {
  background-color: #6d6;
}
#div2 h1 {
  margin: 20px 0 0 0;
}

Oto fajny artykuł, z lekkim wyjaśnieniem

Http://reference.sitepoint.com/css/collapsingmargins

Znajdź to na powyższym linku...

Zwijanie marginesów między elementami rodzica i potomka

Do tej pory zajmowaliśmy się tylko efektem zawalenia na sąsiednich elementów, ale ten sam proces dotyczy rodziców i dzieci którego marginesy dotykają. Przez "dotyk" rozumiemy miejsca, w których nie istnieją wypełnienia, obramowania lub treści pomiędzy sąsiadującymi brzegami. W poniższy przykład, element rodzic ma element potomny, na którym górny margines jest ustawiony:

H1 {margin: 0; background: #cff;} div { margin: 40px 0 25px 0; background: # cfc;} P {margin: 20px 0 0 0; background:# cf9;} In w powyższym arkuszu stylów widać, że zadeklarowana jest górna wartość marginesu dla elementu p, a w poniższym fragmencie kodu widać, że element p jest potomkiem elementu div:

Treść nagłówka

Paragraph content

The wynik tego kodu ilustruje rysunek 2.

Rysunek 2. Zwijanie marginesów na obrazie dziecka zwijanie marginesów między elementem h1 a element div z elementem potomnym P. Jest 40 pikseli w pionie różnica między elementem h1 a treścią akapitu. Można się było spodziewać, że akapit będzie zlokalizowany 60px z nagłówek, od elementu div ma margin-top 40px i jest dalsze 20px margin-top na elemencie P. Można się również spodziewać że 20px koloru tła elementu div pokaże powyżej paragraf. Tak się nie dzieje, ponieważ, jak widać na rysunku 2, marginesy zwijają się razem, tworząc jeden margines. Tylko największe stosuje się marżę (jak w przypadku sąsiednich bloków), ponieważ już widziałem.

W rzeczywistości otrzymalibyśmy ten sam wynik, gdyby nasz element div nie miał topu margines a element p miał 40px margin-top. Margines 40px-top on element p skutecznie staje się górnym marginesem elementu div, i przesuwa div w dół strony o 40px, pozostawiając element p gniazduje Ciasno na szczycie. Żadne tło nie będzie widoczne na div element nad akapitem. ...

Rozwiązywanie problemu z overflow: auto; ain ' t be good, Czy próbowałeś dać ID lub klasę do swojego div, a następnie zrobić to w ur CSS

#divID{
padding:auto;
}

#divID h1{
margin-top: 20px;
}

Nigdy nie używaj przepełnienia, ponieważ może to spowodować więcej problemów, jeśli dodasz SELECT wewnątrz ur DIV, powodzenia

Istnieją trzy różne sposoby w CSS, w których możesz dyktować, które elementy chcesz stylizować. Każdy sposób jest przydatny do określonego zestawu celów, ale używając wszystkich trzech razem, możesz naprawdę wykorzystać kaskadową moc arkuszy stylów. Trzy metody opisywania obiektów na stronie to ich nazwa tagu, ich ID lub ich Klasa.