Problem Description: The prototype is probably "a div nested two Div, to main set the background=" Pink ", Header1 set background=" Red ". Header2 set background= "Blue", at the same time to Heder1 set margin-top:10px; It is expected that the top margin of the inner layer heder1div is 10px away from the top of the maindiv but in fact there is a problem, the inner Div does not appear the kind of effect he expected, the actual effect is maindiv still close to the inner div entire maindiv border distance from the browser to increase The 10px margin "
Problem Description Code:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title> <style> *{margin:0;padding:0;}. Main{width:400px;Height:400px;background:Pink; }. Header1{width:150px;Height:150px;Background-color:Red;
margin-top:10px; }. Header2{width:150px;Height:150px;Background-color:Blue; } </style></Head><Body><Divclass= "Main"><Divclass= "Header1"> </Div><Divclass= "Header2"> </Div> </Div> </Body></HTML>
Solution:
1. Join Overflow:hidden at the parent level;
2, in the parent with Padding-top
3, in the Parent plus position:absolute;
In a regular document flow, the vertical margin adjacent to 2 or more block-level box models is collapsed. The final margin value is calculated as follows:
A, all are positive, take the largest person;
b, not all positive values, then the absolute value is taken, and then minus the maximum with a positive number;
C, without a positive value, take absolute values and subtract the maximum by 0.
Note: Adjacent box models may be dynamically generated by DOM elements and do not have an adjacent or inheritance relationship.
"Margin collapse phenomenon" div box nesting box margin merge phenomenon
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
