I am not sure that this is collapsing margins..perhaps I don't get "margin collapse" but I thought it meant if 2 block level items touching vertically, the larger margin value will be expressed, the smaller will "disappear."
what I'm seeing here as the problem is child element margin top value is pushing its parent downward. and I don't get why? Is the parent the "boss" of the child? Thank yoU! John On May 12, 2013, at 2:17 PM, "Mauricio Silva" <css.mau...@gmail.com> wrote: > Hi J, > > THis happens due the classic "CSS Collapsing Margins" behavior > Have a look at: http://css-discuss.incutio.com/wiki/Collapsing_Margin > for a compreensive explanation. > Regards > > Maurício Samy Silva > http://maujor.com > http://facebook.com/maujor > @maujor > > > -----Mensagem original----- > De: css-d-boun...@lists.css-discuss.org > [mailto:css-d-boun...@lists.css-discuss.org] Em nome de COM > Enviada em: domingo, 12 de maio de 2013 17:50 > Para: CSS-Discuss > Assunto: [css-d] child margin affecting parent? > > Given the css below, why should the header margin value also push the > wrapper downward? In my markup, the wrapper div is the parent, margin:0, > auto; > > thank you > > J > > *{ > padding:0; > margin:0; > } > body{ > background-color:rgb(200,200,200); > font-family:helvetic-neue, Verdana, Arial, sans-serif; > font-size:100%; > } > #wrapper{ > margin:0 auto; > width:940px; > padding:0 20px; > background-color:rgb(220,230,220); > } > header{ > margin:20px 0 1em 0; > border:red 1px solid; > } > ______________________________________________________________________ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- > http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
