Margin-top failure

Exception handling Rollup-Front End Series http://www.cnblogs.com/dunitian/p/4523015.html

This is my case.

According to the Internet, I am the phenomenon.

Two layers box1 and box2,box1 have floating properties, box2 not, this time set box2 the top margin margin-top no effect.

This is an online solution (not applicable to my situation) http://developer.51cto.com/art/201008/222728.htm

This article describes the Margin-top failure of the solution, margin-top failure often appear in two situations to introduce, here to share with you, I hope the introduction of this article will let you have some gains.

Solutions to margin-top failure

There are two common situations:

(i) Margin-top failure

Let's look at the following code:

1. <div>
2. <divclassdivclass="Box1">float:left</div>
3. <divclassdivclass="Box2">clear:both;margin-top:20px; </div>
4. </div>

Two layers box1 and box2,box1 have floating properties, box2 not, this time set box2 the top margin margin-top no effect.

There are two more plausible explanations that can be found online:

1: "In CSS2.1, horizontal margin is not folded; vertical margin may be folded in some box models ..."

2: When the first layer floats, and the second not floating layer of margin will be compressed, see-floating element after the non-floating element of the margin processing.

Get a solution to the problem: to float together, not float together.

Workaround:

1.box2 Add float Property

Add a layer of "<divstyle=" Clear:both between 2.box1 and Box2; ></div> "

(ii) child element setting Margin-top action on parent container

1. <divclassdivclass= "box"style= "height:100px;background:red;" >
2. <divclassdivclass="Box2">clear:both;
3. margin-top:20px;height:50px;width:500px;
4. Background: #000; </div>
5. </div>

When setting Margin-top for Box2, only the parent container is used under FF.

Workaround:

1. Add Overflow:hidden to the parent container box;

2. Parent container box plus border property except None

3. Replace Margin-top with the padding-top of the parent container box

That's what I'm dealing with:

code word ing

Margin-top failure