Marginesy pionowe znikają, gdy rodzic jest ustawiony na przepełnienie: widoczny

Question

Dlaczego marginesy pionowe znikają, gdy rodzic jest ustawiony na przepełnienie: widoczny? Jeśli jest ustawiony na przepełnienie: ukryte marginesy są znowu widoczne. Wydaje się sprzeczne z intuicją.

Myślę, że rozumiem, jak przepełnienie ma działać, gdy zawartość elementu nie mieści się w nim, ale nie rozumiem, co dzieje się z marginesami.

Oto przykład: (http://jsfiddle.net/VrVc7/)

#outer { 
    background-color:#EEE; 
    overflow:hidden; 
} 

#inner { 
    margin: 30px; 
    padding: 5px; 
    background-color:#ABE; 
} 

<div id="outer"> 
    <div id="inner">abc</div> 
</div> 

Answer 1

To z powodu zawalenia marginesie:

Jeśli masz overflow: hidden, marginesy wewnętrznej div pozostają wewnątrz zewnętrznej div.
Jeśli masz przepełnienie: widoczny, górny i dolny margines kolpase z zerowymi marginesami zewnętrznego div, ponieważ stykają się ze sobą. To jest ponownie przeliczane, aby miało to samo, co margines wewnętrzny.

Tak, przepełnienie: ukryte złamie zwijanie marginesów z tymi wewnątrz. Można złamać zawalenie marginesu, nadając zewnętrznemu elementowi div wypełnienie lub obramowanie. Więc nie będą stykały się ze sobą, a więc nie ma zawaleniem

http://www.howtocreate.co.uk/tutorials/css/margincollapsing

Answer 2

wiem, że jest to, jak to wygląda. Ale to, co się tutaj naprawdę dzieje, nazywa się zawaleniem marży. W większości przypadków, gdy rodzic ma margines, lub jeśli dwoje rodzeństwa ma margines, to kolejne okrążenie się kończy. Wyobraź masz div z trójką dzieci:

|--| 
|[]| 
|[]| 
|[]| 
|--| 

Jeśli umieścisz margines 10 na dzieci. Nie będzie w sumie 10 pionowych odstępów między dziećmi, nawet jeśli spodziewamy się, że będzie ich 20. Dzieje się tak dlatego, że jeśli marginesy są wspólne, to zlewają się nawzajem.

Tak czy inaczej, to go wyjaśni, lepiej niż kiedykolwiek mogłem.

Answer 3

Nazywa collapsing margin. Zgodnie W3c

W CSS, przyległe brzegi dwóch lub więcej pól (które mogą lub nie mogą być rodzeństwo) można połączyć w jeden margines. Marginesy , które łączą się w ten sposób, są określane jako zwinięte, a wynikowy łączny margines jest zwany zawiniętym marginesem.

Jak zapobiec collapsing margin.

1. Marginesy unosił się między pola i każdym innym polu nie zawali (nie nawet pomiędzy pływakiem i jej dzieci-flow).
2. Marginesy elementów, które ustanawiają nowe konteksty formatowania bloków (takie jak zmienne i elementy z "przepełnieniem" inne niż "widoczne") nie zwijają się wraz z dziećmi w systemie.
3. Marginesy pudełek pozycjonowanych absolutnie nie zapadają się (nawet wraz z ich dziećmi).
4. Marginesy bloków śródliniowych nie zapadają się (nawet z ich wbudowanymi potomkami ).
5. Dolny margines elementu blokowego w trakcie przepływu zawsze zwinięty jest z górnym marginesem następnego rodzeństwa w wersji blokowej, chyba że rodzeństwo ma odstęp.
6. Górny margines elementu blokowego z przepływem zapada się wraz z pierwszym marginesem górnego marginesu dla dzieci w bloku bloków o wysokości , jeśli element nie ma górnego marginesu , bez dopełnienia górnego, a element potomny nie ma luzu.
7. Dolny margines skrzyni blokowej z "wysokością" "auto" i "min-wysokość" zera zwija się z ostatnim marginalnym dolnym marginesem dziecka, jeśli skrzynka ma brak dolnej podkładki i bez dolnej krawędzi i dolny margines dziecka nie zwija się z górnym marginesem, który ma luz.
8. Własne marginesy w pudełku ulegają zawaleniu, jeśli właściwość "min-height" wynosi zero, i nie ma ona górnej ani dolnej krawędzi ani górnej i dolnej obicia, i ma "wysokość" 0 lub "auto", i nie zawiera ona liniowego pola i wszystkich jego marginesów dla dzieci w czasie wykonywania (jeśli występują). Zwiń.