Solution to the problem that setting margin-top in inner DIV does not work

(1)

When I was working on another site recently, I encountered this problem again and decided to study it carefully and solve it.

The code is as follows:

Upper layer

margin-top:200px;">Sublayer

The ideal effect is that the parent layer and The upper layer welt shows that the child layer is 200px away from the top of the parent layer, which is normal in IE, but there is a problem in FF. The child layer and the parent layer are welted, but the parent layer and the upper layer are separated by 200px.

I was puzzled, so I turned to Google and got the following sentence:

When two containers are nested, if there is nothing else between the outer container and the inner container element, Firefox will apply the margin-top of the inner element to the parent element.

That is to say, because the child layer is the first non-empty child element of the parent layer, this error will occur when using margin-top.

There are two solutions:

1. Use floating to solve the problem, that is, change the sub-layer code to:

Sublayer

2. Use padding-top to solve the problem, that is:

 

Sub-layer

(2)

often You may encounter such a problem, that is, if the height and width of the outer layer p are set, setting maring-top on the inner layer p will not work (tested in FIREFOX and IE8). The reason is roughly that the inner layer p does not obtain the layout. For example, the following code:

The test found that bp's margin-top does not work, and the display effect is still 0px. If you use firebug to view it in firefox, you can see that margin-top has a value, which is 10px; the solution to the problem is as follows:

1. Change margin-top to padding-top, but the premise is that the inner layer The p has no border set
2. Add padding-top
3 to the outer p:

A, float: left or right

B , position: absolute

C, display: inline-block or table-cell or other table type

D, overflow: hidden or auto

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

< /p>

Note: Add a at the end to clear floating .

The above is the detailed content of Solution to the problem that setting margin-top in inner DIV does not work. For more information, please follow other related articles on the PHP Chinese website!