To the child element box a vertical margin margin-top, the parent element box will also go down the value of margin-top, encounter this problem friends can refer to this article may have unexpected harvest
hack:
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 code :
The code is as follows:
<p class= "Box1" >
<p class= "Box2" ></p>
</p>
CSS style :
The code is as follows:
. 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, 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