Margin-top between a CSS parent element and a child element

The parent element box contains a child element box that gives the child element box a vertical outer margin margin-top, and the parent element box goes down the margin-top value, while the child element and the parent element's margins do not change.

HTML code:

<div class= "Box1" >
<div class= "Box2" ></div>
</div>

CSS style:

. Box1{height:200px;width:200px;background:gray;}
. box2{height:100px;width:100px;background:gold;margin-top:50px;}

Workaround:

1, modify the height of the parent element, increase padding-top style simulation (padding-top:1px; common)
2. Add Overflow:hidden to the parent element; style (perfect)
3, for the parent element or child element declaration float (float:left; available)
4, add border for the parent element (border:1px solid transparent available)
5. Declare absolute positioning for parent element or child element

in some browsers, when the elements in the layer set Margin-top, the elements in the layer is not margin, but the parent layer appears margin-top, which often makes people very puzzling it.

Solutions include:

1. Add to Parent layer: Overflow:hidden;
2. Add to Parent layer: border properties other than none
3. Add to Parent layer: Padding-top instead of margin-top effect.