About the inner div setting margin-top does not work solution

About the inner div setting margin-top does not work solution

A

Recently in doing another site, and encountered this problem, decided to study a good solution.

The code is as follows:

<div> Upper Layer </div>

<div> <!--parent Layer--
<div style= "margin-top:200px;" > Sub-layer </div>
</div>

The ideal effect is the parent layer and the upper layer of the welt display, the child layer is 200px away from the top of the parent layer, normal in IE, but there is a problem in the FF, the child layer and the parent layer is facing, but the parent layer and the upper layer are spaced 200px.

Think of the solution, to help Google, get the following sentence:

When two containers are nested, if there is no other element between the outer container and the inner container, Firefox will margin-top the inner element with the parent element.

That is, because the child layer is the first non-empty element of the parent layer, this error occurs when you use Margin-top.

There are two ways to solve this problem:

1, using floating to solve, will be the sub-layer code to: <div style= "Margin-top:200px;float:left";> sub-layer </div>

2, use Padding-top to solve, namely:

<div style= "padding-top:200px;" >
<div> Sub-layer </div>
</div>

Two

It is often possible to encounter such a problem, that is, the outer div set the height and width, the inner div If set maring-top does not work (Firefox and IE8 test), the reason is that the inner Div does not get the layout. As in the following code:

<style>

. adiv {background:red; width:300px; height:300px;}
. bdiv {background:green; position:relative; width:100px; height:20px; margin-top:10px;}
. cdiv {background:black; position:relative; width:100px; height:20px;}
</style>

<div class= "Adiv" >
<div class= "Bdiv" ></div>
<div class= "Cdiv" ></div>
</div>

The test found that Bdiv's margin-top did not work, and was still the 0px display effect. If you use Firebug to view in Firefox, you can see that margin-top is a value, 10px; The problem is as follows:

1, change the margin-top to Padding-top, however, the premise is that the inner Div does not set the border
2. Add padding-top to the outer div
3. Add to the outer div:

A, Float:left or right

B, Position:absolute

C, Display:inline-block or Table-cell or other table types

D, Overflow:hidden or Auto

For example, you can change the above code as follows:

<style>

. a {background:red; width:300px; height:300px; float:left;}
. b {background:green; position:relative; width:100px; height:20px; margin:10px;}
. c {background:black; position:relative; width:100px; height:20px;}

. clear{Clear:both;}
</style>

<div class= "a" >
<div class= "B" ></div>
<div class= "C" ></div>
</div>

<div class= "Clear" ></div>

Note: Add a clear float later.

About the inner div setting margin-top does not work solution