Shulou(Shulou.com)05/31 Report--

In this article, the editor introduces in detail "how to solve the failure of margin-top attributes in CSS". The content is detailed, the steps are clear, and the details are handled properly. I hope that this article "how to solve the failure of margin-top attributes in CSS" can help you solve your doubts.

On the solution to the failure of margin-top attributes

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

After reading this, the article "how to solve the failure of margin-top attributes in CSS" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.