There is a magical problem when designing the page, which is the HTML code
<body>
<div class= "Homenav" >
<div class= "Homecategory" >
</div>
</div>
</body>
At this point I set the homecategory of the child container:
. homecategory{
margin-top:30px;
}
Found margin relative to the parent container wrong, find body went, became relative to the body to set margin, at this time set the Homenav height and width have no effect, let me crazy unceasingly, Div are not obedient, debugging a half-day finally found the reason.
Reason:
In two nested div, if the outer div's parent container padding value is 0,
Then the margin-top or margin-bottom values of the inner div are "transferred" to the outer Div, the parent container of the parent container.
Solution:
1: Set the style of the parent container plus: Overflow:hidden.
2: Change the margin-top outer margin of the parent container to the padding-top inner margin.
3: To the parent container div plus style, padding-top:1px.
4: To the parent container div plus style, position:absolute.
5: The parent element into a block formating context, the following is an optional method
A, Float:left/right
B, Position:absolute
C, Display:inline-block/table-cell
D, Overflow:hidden/auto
My own use is the first method, suggested Method 1.
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
