Margin margin problem

1, the upper and lower margins will be superimposed

1. ! DOCTYPE html><HTML><Head><m<etacharset= "UTF-8"><title></title><style>. Box1{width:500px;Height:300px;background:Blue;Margin-bottom:30px;}. Box2{width:300px;Height:100px;background:#ffff00;Margin-top:30px;}</style></Head><Body><Divclass= "Box1"></Div><Divclass= "Box2"></Div></Body></HTML>

2. When the parent contains children, the child's margin-top is passed to the parent, and the parent's padding can be used instead of their margin.

1. <!DOCTYPE HTML><HTML><Head><Metacharset= "UTF-8"><title></title><style>. Box1{width:500px;Height:300px;background:Blue;}. Box2{width:300px;Height:100px;background:#ffff00;Margin-top:30px;}</style></Head><Body><Divclass= "Box1"><Divclass= "Box2"></Div></Div></Body></HTML>

3, margin aroundMargin-lefta:uto    Partial RightMargin-right:auto    Partial leftMargin:autoCenter Horizontally    

Margin margin problem