Why Margin-top is not acting on the parent element:
As for the basic usage of the Margin-top attribute, it is simply to set the top margin of an object and see the following code example:
<!DOCTYPE HTML><HTML><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /><Metaname= "Author"content= "http://www.51texiao.cn/" /><title>Ant Tribe</title><styletype= "Text/css"> * {margin:0px;padding:0px; }Div{width:100px;Height:100px;Background-color:Green;Margin-top:50px; } </style> </Head> <Body> <Div></Div> </Body> </HTML>
The above code can set the top margin of the div to 50px, everything works well, without any problems, and then look at the next piece of code:
<!DOCTYPE HTML><HTML><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /><Metaname= "Author"content= "http://www.51texiao.cn/" /><title>Ant Tribe</title><styletype= "Text/css">#parent{width:200px;Height:200px;Background-color:Red; }#children{width:60px;Height:60px;Background-color:Green;margin:0px Auto;Margin-top:50px; } </style> </Head> <Body> <DivID= "Parent"> <DivID= "Children"></Div> </Div> </Body> </HTML>
The original intention of the above code is to let the child element's top distance from the parent element 50px, but in fact did not achieve the desired effect, but the child element at the top of the parent element, and Margin-top seems to be transferred to the parent element, so that the parent element to produce the upper margin. This is actually a typical margin merge issue, but not all browsers do this, and IE6 and IE7 do not appear in this state without margin merging. The conditions for the upper margin merge to occur:
1. There is no border between the top margin of the parent element and the top margin of the child element.
2. There is no non-empty content between the top margin of the parent element and the top margin of the child element.
3. There is no padding between the top margin of the parent element and the top margin of the child element.
3. Positional properties (except static and relative), overflow (except for visible) and Display:inline-block are not set in parent and child elements.
4. Neither the parent element nor the resource is floating.
Note: The above conditions must be met before you can. The way to solve this situation is also simple, as long as it destroys one of the above situations.
The original address is: http://www.51texiao.cn/div_cssjiaocheng/2015/0501/506.html
Why Margin-top is not acting on the parent element
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
