What are the common symptoms of margin-top failure

This article will share with you about the common symptoms of margin-top failure. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

On the solution of margin-top failure

There are two common situations:

(1) margin-top failure

Take a look at the following code:

Float:left clear:both;margin-top:20px

The two layers box1 and box2,box1 have floating properties, but box2 does not, so setting the top margin margin-top of box2 has no effect.

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

1: "in CSS2.1, horizontal margin will not be collapsed; vertical margin may be collapsed in some box models."

2: when * layers float, and the second margin without floating layer will be compressed. For more information, please see-- margin processing of non-floating elements after floating elements.

Get the idea to solve the problem: float together, or not float together.

◆ solution:

1.box2 adds float attribute

Add a layer between 2.box1 and box2

(2) the child element sets the margin-top to act on the parent container

Clear:both; margin-top:20px;height:50px;width:500px; background:#000

When setting margin-top for box2, it only works on the parent container under FF.

◆ solution:

1. Add an overflow:hidden; attribute to the parent container box

two。 Parent container box plus border attributes other than none

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

Thank you for reading! This is the end of this article on "what are the common symptoms of margin-top failure?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!