Margin-Top push outer div down

Nie mam solidnego wyjaśnienia dlaczego tak się dzieje, ale naprawiłem to zmieniając top-margin na top-padding, lub dodając display: inline-block do stylu elementu.

EDIT: to moja teoria

Mam wrażenie, że ma to coś wspólnego z tym, jak marginesy są zwijane (połączone).

From W3C: :

W niniejszej specyfikacji wyrażenie zwijanie się marginesów oznacza, że przylegające marginesy (bez niepustych treść, wypełnienie lub obramowanie obszary lub rozdzielenie ich) z dwóch lub więcej pudełek (które mogą znajdować się obok jednego inny lub zagnieżdżony) łączą się tworząc pojedynczy margines.

Moja teoria jest taka, że skoro twój pierwszy element jest obok ciała, dwa marginesy łączą się i są nakładane na ciało: to wymusza, aby zawartość ciała zaczynała się poniżej zastosowanego marginesu załamanego zgodnie z modelem pudełkowym .

Są sytuacje, w których marginesy nie zapadają się, co może być warte obejrzenia with (from Collapsing Margins):

* floated elements
* absolutely positioned elements
* inline-block elements
* elements with overflow set to anything other than visible (They do not collapse margins with their children.)
* cleared elements (They do not collapse their top margins with their parent block’s bottom margin.)
* the root element

Oto niektóre ze sposobów na uniknięcie załamywania się marginesu między elementami rodzic-dziecko. Użyj tego, który lepiej pasuje do reszty stylizacji: [19]}

• ustawić {[0] } Na inne niż block.
• ustawić float na inne niż none.
• Usuń margines i użyj zamiast padding. Na przykład, jeśli masz margin-top: 10px, zastąp przez padding-top: 10px;.
• Usuń margines, a zamiast tego użyj position (absolute lub relative) z atrybutami top, bottom, itd. Na przykład jeśli masz margin-top: 10px, zastąp z position: relative; top: 10px;.
• dodaj padding lub border z boku, gdzie marginesy są zwijane, do elementu rodzica . Granica może być 1px i przezroczysta.
• Ustaw overflow na inny niż visible na rodzic element.

display: flex będzie działać w tym przypadku. Podaj element nadrzędny display: flex;, a następnie podaj margines zgodnie z wymaganiami znacznika h1.

Wiem, że to stary problem, natknąłem się na niego wiele razy. Problem polega na tym, że wszystkie poprawki tutaj są hacki, które potencjalnie mogą mieć niezamierzone konsekwencje.

Po pierwsze, jest łatwe wyjaśnienie problemu głównego. Ze względu na sposób zwijania się marginesu, jeśli pierwszy element wewnątrz kontenera ma górny margines, ten górny margines jest skutecznie stosowany do samego kontenera macierzystego. Możesz to przetestować samodzielnie, wykonując następujące czynności:

<div>
    <h1>Test</h1>
</div>

W debugger, Otwórz to i najedź kursorem na div. Zauważysz, że sam div jest umieszczony tam, gdzie górny margines elementu H1 zatrzymuje się. Takie zachowanie jest zamierzone przez przeglądarkę.

Jest więc Łatwa poprawka, bez konieczności uciekania się do dziwnych hacków, jak większość postów tutaj (bez obelg, to tylko prawda) - po prostu wróć do oryginalnego wyjaśnienia- ...if the first element inside a container has a top margin... - Po tym, więc potrzebujesz pierwszego elementu w kontenerze, aby , a nie miej górny margines. Ok, ale jak to zrobić bez dodawania elementów, które nie kolidują semantycznie z dokumentem?

CSS via a class:

.top-margin-fix:before {   
    content: ' ';
    display: block;
    width: 100%;
    height: .0000001em;
}

W ten sposób, po powyższym przykładzie znaczników możesz zmodyfikować swój div jako taki:

<div class="top-margin-fix">
    <h1>Test</h1>
</div>

dlaczego to działa?

Pierwszy element w kontenerze, jeśli nie ma górny margines, ustawia pozycję początku górnego marginesu następnego elementu. Dzięki dodaniu pseudoelementu :before, przeglądarka w rzeczywistości dodaje element niemantyczny (innymi słowy dobry dla SEO) do nadrzędnego kontenera przed Twoim pierwszym elementem.

Q. dlaczego wysokość: .0000001em?

A. wysokość jest wymagana, aby przeglądarka zepchnęła element marginesu w dół. Ta wysokość jest efektywnie zerowa, ale nadal pozwala na dodanie wypełnienia do samego kontenera nadrzędnego. Od jest praktycznie zerowy, nie będzie też miał wpływu na układ kontenera. Pięknie.

Teraz możesz dodać klasę (lub lepiej, w SASS/LESS, mixin!) aby rozwiązać ten problem, zamiast dodawać dziwne style wyświetlania, które będą powodować nieoczekiwane konsekwencje, gdy chcesz zrobić inne rzeczy z elementami, celowo eliminując marginesy na elementach i/lub zastępując je wypełnieniami, lub dziwne style pozycji/pływaka, które naprawdę nie są przeznaczone do rozwiązania tego problemu.

Natknąć się na ten problem dzisiaj.

overflow: hidden nie działał zgodnie z oczekiwaniami, gdy miałem więcej elementów po.

Więc próbowałem zmienić właściwość display rodzica div I display: flex zadziałało !!!

Dodanie odrobiny wypełnienia do elementu nadrzędnego top może rozwiązać ten problem.

.parent{
  padding-top: 0.01em;
}

Jest to przydatne, jeśli potrzebujesz elementu wewnątrz elementu nadrzędnego, aby był widoczny poza elementem nadrzędnym, jak w przypadku tworzenia efektu nakładania się.