CSS layout-powerful negative margin

Negative margin in css is a common technique in layout, which often produces unexpected results if used properly. Many special css layout methods depend on the negative margin. Therefore, it is necessary for front-end students to master its usage. This article is very basic. You can skip it.

 

The role and effect of the negative margin in the normal Document Stream

Elements that are not separated from the document stream (not floating elements, not absolute positioning, fixed positioning elements, etc.), and their position on the page changes with the changes of the Document Stream. Take a look at the figure below:

The negative margin is used to offset the position of these elements in the Document Stream, but this offset is different from the relative positioning, it will still stick to the space occupied by it, and will not let other elements of the Document Stream multiply. The offset element through the negative margin will discard the space occupied before the offset, so that other elements in the Document Stream after it will "stream" to fill this space. Let's explain it through examples. Now we set a negative margin:-10px for block elements, line elements, and inline-block elements to see what will happen:

We can see that the black and gray block elements seem to have embedded 10 Px in the border of the browser window to the left and up respectively, and then the text under the Block Element also crawled on it, the line element moves to the left to cover a word before it, and some of the text behind it also covers it. The inline-block position changes significantly.

Well, I believe everyone knows this for a long time, that is, the negative margin seems to reduce the size of the element in the Document Stream, but in fact, its size has not changed, only when the file stream calculates the element position, it will think that the negative margin reduces the element size, because the position also changes. This is just a metaphor to help you understand. Note that the document stream can only flow to the front, that is, the document stream can only flow to the left or up, and cannot move down or to the right.

Therefore, as long as everything is determined by the Document Stream, the negative margin will work.

For example, the height of a block element without a specified height is automatically determined by the final position of the Document Stream in it. Assume that there is a child element in the document stream with a height of PX. Then the height of the parent element is equal to PX of the child element. If the child element continues to increase, the parent element will also increase. However, if the child element sets a negative margin-bottom, for example,-20px, because the negative margin will affect the document stream, originally, the height of the Document Stream is from the top of the parent element to the bottom of the child element. Now the child element has a margin-bottom:-20px; this is equivalent to 20 PX of the Document Stream to move up and down, in this way, the height of the entire document stream is reduced by 20 PX, and the height of the parent element is reduced by 20 PX. In a standard browser, this requires that the parent element has an overflow: Den den attribute, which is not required in IE. Therefore, this principle is used to implement a layout with multiple columns.

In a word, in a document stream, the final boundary of an element is determined by margin. When margin is negative, it is equivalent to receiving the boundary of an element. The Document Stream recognizes only this boundary, it doesn't matter what your actual size is.

Influence of left and right margins on element width

The negative margin not only affects the position of the element in the Document Stream, but also increases the width of the element!

The premise for this function is that the element does not set the width attribute (of course, width: auto is acceptable ).

For example, the black-gray part is a block element, and it does not set the width. It is enclosed in a parent element with a width of PX and horizontally centered.

Now set a margin-right:-100px for this element;

We can see that its width is indeed increased by PX; then we can set a margin-left:-100px;

We can see that it has become wider.

Negative margin will change the width of the element, which is indeed confusing. If the negative margin will change the position of the element in the Document Stream, the phenomenon of changing the width is really incredible.

What is the purpose of this product? Let me give an example.

How do I arrange several elements in the black box in sequence ?, Of course, the simplest and easiest way to save trouble is to use floating. Let's move the child elements in the black box to the left and set a proper margin-right. Is that all done? However, because the width of the black box outside is fixed, that is, the width of the four sub-elements plus the width of the three columns separated, therefore, subelements close to the right boundary should not have a forward margin-right. Otherwise, this row can only contain three subelements. Some people say that this is not simple. Just add a class to the child elements near the right boundary and set its margin-right to 0. This is certainly acceptable, but if these child elements are output dynamically through loops in the template, You have to determine which child elements are close to the right boundary during the loop, if yes, add a class. Is it a little troublesome to do this? Therefore, 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 the width of the Four-column interval, and then set an overflow for the container in the outer black box: just do it. As mentioned above, the negative left margin can increase the width of the element, so you can set a proper negative margin-right for the parent container of the child element. Of course, you can also directly set the width of the parent container of the child element in css. This example is just to show that the negative margin is also a method. Take a look at the complete code:

<Style> 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 is equivalent to increasing the ul width by 20px */li {height: 100px; width: 100px; background: # 09F; float: left; margin-right: 20px; margin-bottom: 10px ;} </style> <div class = "container"> <ul> <li> child element 1 </li> <li> child element 2 </li> <li> child element 3 </li> <li> child element 4 </li> <li> child element 5 </li> <li> child element 6 </li> <li> child element 7 </li> <li> child element 8 </li> </ul> </div>

 

Influence of the negative margin on floating Elements

The influence of the negative margin on floating elements is similar to that of the elements in the Document Stream. The position of elements in a document stream is determined by the direction of the Document Stream. The floating element can also be seen as a "floating stream", but the floating stream can be either left or right.

For example, there are three elements floating to the left, and the width and height are 100px:

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

We can see that the following elements are stacked on the previous elements.

Let's look at the following figure:

We reduced the browser, and element 3 fell down because the width was not enough. Let's set a margin-left:-80px for element 3.

At this time, we can see that element 3 goes up and covers part of element 2. Set element 3 to margin-left:-100px.

Element 3 completely overwrites element 2. When element 3 is set to: margin-left:-200px:

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

Now everyone must understand the influence of the negative margin on the position of floating elements. Therefore, the Holy question layout, dual-flying wing layout, and so on, which are well-spoken, are all implemented using this principle. That is, although an element is written behind it, it can be displayed in front of the browser through the negative margin. You can talk about this later.

Influence of negative margin on absolute positioning Elements

The top, right, bottom, and left values defined by the absolute positioning element are the distance from the element's own boundary to the nearest located ancestor element, the boundary of this element refers to the boundary defined by margin. Therefore, if margin is positive, its boundary is extended. If margin is negative, then its boundary is inbound. By taking advantage of this, there is a classic method to use absolute positioning:

See the following results:

However, the disadvantage of this method is that you must know the height and width of the element to be centered.

 

The above is just a brief overview of the role of the negative margin. More and more practical usage still requires you to think about and practice to understand. These words are written in a hurry, just like the habit of having no examination. Please forgive me and correct me for any errors.