Home > Developer > Web Develop
When designing a page, there's a magical question, and here's the code for the HTML
<body>
<div class= "Homenav" >
<div class= "Homecategory" >
</div>
</div>
</body>
At this point I set the style of the sub-container homecategory:
. homecategory{
margin-top:30px;
}
Found margin relative to the parent container wrong, found body went, became relative to the body to set margin, at this time set the height and width of the homenav 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 parent container of the outer div padding a value of 0,
Then the margin-top or margin-bottom value of the inner div is "transferred" to the outer Div, which is the parent container of the parent container.
Workaround:
1: Set the style of the parent container plus: Overflow:hidden.
2: Change the margin-top margin of the parent container to the padding-top inner margin.
3: Add style to parent container Div, padding-top:1px.
4: Add style to parent container Div, Position:absolute.
5: Turn 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
Recommendation Method 1.
Margin-top or margin-bottom failure in CSS
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
