Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to merge margins in Css. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Generally speaking, there are three main situations in which outer margin merging occurs:

1. Neighboring sibling elements

The outer margin between two sibling elements takes the maximum value of the outer margin between the two elements.

The bottom margin of this paragraph is merged.

... The upper margin of this paragraph is merged.

According to the above example, the distance between the two p elements is 30px.

two。 Parent and child elements

This situation can be divided into the following two categories:

The upper outer margin of the parent element and the upper outer margin of the first child element

The lower outer margin of the parent element and the lower outer margin of the last child element

In both cases, the final result is to take the maximum of the two.

3. Empty element

Your own upper margin will merge with your lower margin.

The distance between this paragraph and the following paragraph will be 20px

The distance between this paragraph and the above paragraph will be 20px

So the distance between the first p element and the third p element is 20px

Block the merge method:

General method

Elements in a static stream will merge, so neither float nor position:absolute will merge

Set to inline-block, no merging will occur

Do not merge methods for parent and child elements

None of the following will occur.

The clear floating property is set

Because margin requires direct contact to merge, there are border or padding in the parent or child elements, or elements in between

Note: if one of the two margin values is 0, a merge also occurs.

If there is a negative margin, the merged margin is the maximum positive margin plus the minimum negative margin (the one with the largest absolute value). If the lower margin of the upper element is 20px and the upper margin of the lower element is-20px, then the final margin is 0px.

This is the end of the article on "how to merge margins in Css". 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, please share it for more people to see.

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.