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

This article introduces the knowledge of "how to fold margins in css". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Let's start with a simple example:

.slide1 div {margin:10px 0;} the first outer margin fold: sibling element

Text spacing between top and bottom 10px

Text spacing between top and bottom 10px

Look at the two p tags in this example, according to the style definition: the margin-bottom of the first p and the margin-top of the second p are both 10px, so the actual distance should be equal to 20px, but if you look at it with a browser, you can find that the final margin is 10px. This example is outer margin folding: the upper and lower margins of block-level elements are sometimes merged (or folded) into one outer margin.

Classification situation

There are three basic cases of outer margin folding:

Adjacent element

Parent element and first child element (or last child element, remember later to think about why this is the first or last one)

Empty block-level element

Do not rush to remember, first of all, in the previous example is the first case-the outer margin folding between two adjacent elements.

The second and third situations are as follows:

.child {background-color: green;} .child {margin-top: 50px; background-color: red; height: 300px;} .slide3 {margin: 10px 0;} second outer margin fold: parent element and first child element third outer margin fold: empty block-level element

Their images are also shown in the picture:

Case 2: the outer margin of the child element is "transferred" to the outside of the parent element

Case 3: the upper and lower margins of the element will collapse

Well, here we might as well take a look at what these situations have in common (I suggest drawing their box models, but I won't draw-_ -), we can find the common cause of outer margin folding: there is no barrier between margin.

How to understand direct contact? It's simple:

In the first example, two

The vertical margin of the label is in direct contact.

In the second example, since the padding,border of the parent element is 0, the margin is also in direct contact with its child elements. (this example is easy to understand when drawing a box model.)

In the third example, the upper and lower margins of the empty element itself are also in direct contact (padding,border is also 0)

The result of folding in various cases

How to calculate the folded margin can be easily verified as follows:

If both outer margins are positive, the folded margin is larger.

If the two margins are positive and negative, the folded margins are the sum of the margins.

If both margins are negative, the margin behind the fold is the sum of the smaller margins.

How to prevent the outer margin from folding

As mentioned earlier, the reason for the outer margin folding is that the outer margin is in direct contact, so the way to prevent folding is to block this direct contact, and the combination methods include:

In the case of nesting, as long as border padding is not 0 or is separated by inline elements, for example, you can add a line of text to the parent element (you can try it directly in case 2)

Any way to form a barrier with the help of bfc, such as floating, display:table, etc. (for students who are not familiar with BFC, check it first, I'll make it up later)

This is the end of "how to fold margins in css". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.