html - Another css margin-top issue... is it really collapsing? -

html - Another css margin-top issue... is it really collapsing? -

in this fiddle, i'm wondering why bluish div not contain child, since margin on kid inside container (i.e. why space white on top instead of blue).

<div id="container"> <div id="box"></div> </div>

...

#container { background-color: dodgerblue; } #box { width: 100px; height: 100px; margin: 50px; background-color: wheat; }

as far can tell, this not collapsing margin issue, because there aren't 2 margins collapse; kid box has margin.

note: i'm looking why. know making container block formatting context (demonstrated here), fixes problem (e.g. overflow:auto).

why: collapsing margins doesn't mean need define margin parent element, parent element has margin automatically calculated browser , applied element.

actually, is because of collapsing margins of css box model definition:

css 2.1 8.3.1 collapsing margins

in css, adjoining margins of 2 or more boxes (which might or might not siblings) can combine form single margin. margins combine way said collapse, , resulting combined margin called collapsed margin.

from definition:

margins of inline-block boxes not collapse (not in-flow children).

so one way alter display of #box inline-block avoid behavior.

to not touch display type, way utilize padding spacing.

another way add together border of same color #box. if create sure have box-sizing: border-box; on #box (-moz-box-sizing: border-box; firefox or gecko browsers) (borders prevent margins collapsing)

question asked in comments: why adding 1px padding prevents margins collapsing?

from box model definition:

adjoining vertical margins collapse.

. . .

(one of conditions 2 margins adjoining)

no line boxes, no clearance, no padding , no border separate them.

so definition, if add together 1px padding margins not adjoining anymore , collapsing doesn't happen.

html css margin