Upadek marży i rozliczenie [zamknięte] - css, marża, w3c

Czytam specyfikacje W3C i naprawdę nie rozumiem ten :

Jeśli górny i dolny margines elementu zodprawy są przylegające, jego marże spadają z sąsiednimi marginesami po rodzeństwie, ale wynikający z tego margines nie ulega załamaniu dolny margines bloku macierzystego.

Czy ktoś mógłby mi to wyjaśnić lub JSFiddle?

Odpowiedzi:

Tak. Popatrz na to jsfiddle w Firefoksie lub IE.¹

<style>
.case { width:200px; background-color:yellow; }

.container { background-color:lightblue; margin-bottom:70px; padding-top:0.01px; }
.preface { float:left; height: 58px; width: 100px; border: 1px solid red; }
.one .intro { clear: left; margin-top:60px; }
.two .intro { clear: left; margin-top:59px; }
</style>

<div class="case one">
<div class="container">
<div class="preface">
lorem ipsum
</div>
<div class="intro"></div>
</div>
after
</div>
<hr>
<div class="case two">
<div class="container">
<div class="preface">
lorem ipsum
</div>
<div class="intro"></div>
</div>
after
</div>

(Przypadki są identyczne, z wyjątkiem nazwy klasy „jeden” lub „dwa” i ich zastosowanego CSS padding-top:0.01px; oznacza, że ​​wartości marginesów górnych bloku intro nie zostaną zwinięte do górnej krawędzi kontenera

Kiedy element ma clear wartość zastosowana w taki sposób, że jej pudełko rzeczywiście się obniża, jak twierdzi luz. Widzimy, że dzieje się tak w drugim przypadku. W przypadku jednego, pudełko nadal ma clear:left ale jego górny margines jest wystarczająco duży, aby pole elementu nie musiało się poruszać, więc nie ma luzu.

Teraz spójrz na wynik.

W przypadku jednego, dolny margines 70px nakontener zwija się z górnym marginesem .intro div, pozostawiając pojedynczą 70px odległość między górą .container div i tekstem „after”. W przypadku dwóch, ponieważ podział .intro ma zezwolenie, zgodnie z cytowanym fragmentem specyfikacji, dolny margines kontenera nie może zwinąć się z górnym marginesem .intro div. Tak więc zastosowany jest górny margines, co powoduje, że obszar jasnoniebieskiego tła, a następnie dolny margines pojemnika jest nakładany oddzielnie, co powoduje powstanie żółtego obszaru tła.

¹_{Niestety, Chrome robi to strasznie źle.}