css - why margins collapse effect background images? -

css - why margins collapse effect background images? -

i have simple html , css following. notice bottom margin collapse between .outside box , .inside box. i don't understand why can't see background image when bottom margin collapse, background image should nil margin. :)

<div class="outside"> <div class="inside"> content </div> </div> .outside {background:url(http://blurfun.com/temp/images/bottom.png) left bottom no-repeat; padding-top:1px;} .inside { background:#00ccff; margin:0 0 10px 0; padding:0 0 20px 0;}

you experimenting vertical margin collapse between nested divs include overflow property (any value not equal visible job), , work ok

.outside { background:#ff0000 url(http://blurfun.com/temp/images/bottom.png) left bottom no-repeat; padding-top:1px; overflow:hidden; }

the reddish color added test result. of course of study can wiped.

detailed comment

your outside div uses sort of yellowish strip @ left bottom.

your within div has bottom margin of 10 px , there nil in between margin , outside div bottom margin. thats why collapsing.

you prevent happen including bottom padding or bottom border outside div. alter design intentions.

that why suggested using overflow property prevents vertical margin collapse , not interfere design.

in fiddle added left margin within div , reddish background outside div.

for didactic porpouse included transparent background within div.

vertical margins collapsing

prevented overflow:hidden

play it. delete overflow property , watch vertical margins collapsing. hope clear plenty you.

have day , enjoy coding :-)

css background margin