The parent element's box contains a child element box, a vertical margin margin-top to the child element box, the parent element box also goes down the value of margin-top, and the margins of the child and parent elements are not changed.
HTML,CSS:
<Divclass= "Box1"> <Divclass= "Box2"> <Divclass= "Content"> <Divclass= "margin">123</Div> </Div> </Div></Div>
*{padding:0; margin:0;}. box1{width:600px; height:1042px; margin:0 auto; background: #ccc; overflow:hidden;}. box2{width:600px; height:1042px; background: #000; overflow:hidden;}. content{width:600px; height:1042px; Overflow:hidden;}. margin{width:400px; height:30px; line-height:30px; text-align:center; margin:20px; background: #f00; Overflow:hidden;}
Workaround:
1, modify the height of the parent element, add padding-top style simulation (padding-top:1px; common)
2. Add Overflow:hidden for parent element; style (perfect)
3. Declare floats for parent or child elements (float:left; available)
4. Add border for parent element (border:1px solid transparent available)
5. Absolute positioning for parent element or child element declaration
The parent element moves with the child element margin value when the CSS is set