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

This article will explain in detail how to use the common skills margin negative outer margin. The content of the article is of high quality. Therefore, Xiaobian will share it with you for reference. I hope you will have a certain understanding of relevant knowledge after reading this article.

Negative margin in CSS is a common technique in layout, and as long as it is used properly, it often has unexpected effects. Many special css layouts rely on negative margins, so mastering its usage is a must for front-end students.

The Role and Effect of Negative Margins in Ordinary Document Flow

Those elements that do not deviate from the document flow (i.e., elements that are neither floating nor absolutely positioned, fixedly positioned, etc.), their position in the page changes as the document flow changes. Look at this picture below:

The effect of negative margins on these elements controlled by the document flow is to shift their position in the document flow, but this offset is different from relative positioning, which still holds the space it originally occupied and does not allow other elements of the document flow to take advantage of it. An element offset by a negative margin gives up the space it occupied before the offset, so that other elements in the document flow behind it "flow" to fill the space. Let's illustrate it by example. Now let's set the block element, the inline element, and the inline-block element in the image above to a negative margin:-10px; and see what happens:

We see that the black and gray block element seems to be embedded in the border of the browser window 10px to the left and up respectively, and then the text below the block element climbs onto it, the inline element moves to the left to cover a word in front of it, and the text behind it also partially covers it, and the position of the inline-block changes obviously.

Well, as you already know, negative margins seem to reduce the size of elements in document flow, but in fact, their size doesn't change, except that document flow calculates the element's position as if negative margins reduce the element's size because the position changes. This is just a very vivid metaphor to help you understand. Note also that document flow can only flow from the back to the front, that is, document flow can only flow left or upward, and cannot move downward or right.

So negative margins work as long as everything is determined by document flow.

For example, a block element whose height is not set is automatically determined by the last position of the document stream inside it. Suppose it has a child element in the document flow with a height of 100px; then the height of the parent element is equal to the height of the child element 100px, and if the child element continues to grow, then the parent element will also grow. However, if the child element is set to a negative margin-bottom, such as-20px, because the negative margin will affect the document flow, the height of the document flow is originally from the top of the parent element to the bottom of the child element, and now the child element has a margin-bottom:-20px; it is equivalent to the document flow going up 20px, so that the height of the entire document flow is reduced by 20px, and the height of the parent element will also be reduced by 20px. In standard browsers, this also requires the parent element to have an overflow:hidden attribute, but not in Internet Explorer. Therefore, the previously mentioned multi-column contour layout is realized by using this principle.

In a word, in the document flow, the final boundary of the element is determined by the margin. When the margin is negative, it is equivalent to the inward convergence of the boundary of the element. The document flow recognizes only this boundary, regardless of your actual size.

The effect of negative margins on element width on left and right

Negative margins not only affect the position of an element in the document flow, they also increase the width of the element!

This can be done if the element does not have a width attribute (width:auto is fine).

For example, the black-gray part of the image below is a block element with no width. It is wrapped in a horizontally centered parent element with a width of 400px.

Now give this element a margin-right:-100px;

We see that it does get longer by 100px; then we give it a margin-left:-100px;

We see it getting wider.

Negative margins change the width of an element, which is really confusing, and if negative margins change the position of an element in the document flow is still easy to understand, then changing the width is really quite incredible.

So what's the use of this stuff? Let me give you one example.

How do you want to create a layout where the elements in the black box are arranged sequentially with some spaces in between? Of course, the easiest way to save trouble is to use floating. We float the child elements in the black box to the left, and then set an appropriate margin-right. Is that it? However, since the width of the outer black box is fixed, that is, the width of the four child elements plus the width of the three columns, the child elements near the right boundary should not have a positive margin-right, otherwise this row can only accommodate three child elements. Some people say that this is not simple, add a class to those child elements near the right boundary, and set its margin-right to 0. Of course, this is possible, but if these sub-elements are output dynamically through a loop in the template, then it is necessary to determine which sub-elements are close to the right boundary when looping, and if so, add a class. Isn't that a little troublesome? So the solution is to increase the width of the parent container of the child element so that it can accommodate four child elements in a row plus four columns of space, and then set an overflow:hidden in the outermost black box container. It says above that negative margins increase the width of an element, so just give the parent container of a child an appropriate negative margin-right. Of course, you can also set the width of the parent container of the child element directly in css. This example is just to illustrate that negative margins are also a method. Check out the full code:

The code is as follows:

body,ul,li{ padding:0; margin:0;}

ul,li{ list-style:none;}

.container{ height:210px; width:460px; border:5px solid #000;}

ul{ height:210px; overflow:hidden; margin-right:-20px;}/* A negative margin-right increases the width of ul by 20px*/

li{ height:100px; width:100px; background:#09F; float:left; margin-right:20px; margin-bottom:10px;}

Child element 1

Child element 2

Child element 3

Child element 4

Child element 5

Child element 6

Child element 7

Child element 8

Effect of negative margins on floating elements

Negative margins have the same effect on floating elements as negative margins do on elements in document flow. The position of elements in the document flow is determined by the direction of the document flow. Floating elements can also be regarded as having a "floating flow", but the floating flow can be left or right.

For example, the following figure shows three elements floating to the left, with a width and height of 100px:

Now set them all to a margin-right:-50px; and it will look like this:

We see that the latter element overlaps the former element.

Look at the following picture:

We scaled down the browser, and element 3 fell off because it wasn't wide enough. Let's give element 3 a margin-left:-80px; see what happens

At this point we see element 3 going up and covering part of element 2. Continue element 3 is set to margin-left:-100px

Element 3 completely covers element 2, and when element 3 is set to: margin-left:-200px:

We see that element 3 continues to move to the left and overlaps element 1.

Now you all understand how negative margins affect the position of floating elements. Therefore, the Holy Grail layout, the double-wing layout, and so on were all realized by using this principle. That is, although an element is written at the back, it can be displayed in the browser by negative margins. We can talk about this later.

Influence of Negative Margins on Absolute Positioning Elements

The top, right, bottom, and left equivalents of an absolutely positioned element definition are the distance from the edge of the element itself to the nearest positioned ancestor element, and the edge of the element itself refers to the edge defined by margin, so if margin is positive, its edge is outward, and if margin is negative, its edge is inward. Using this, there is the classic method of centering with absolute positioning:

See the effect:

The disadvantage of this method is that you must know the height and width of the element you want to center.

About the common skills margin negative margin use method to share here, I hope the above content can be of some help to everyone, you can learn more knowledge. If you think the article is good, you can share it so that more people can see it.

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.