Explore the principle of negative margin (negative margin)

In the introduction of margin, there is such a sentence:

Negative values for margin properties is allowed, but there could be implementation-specific limits.

As a result, smart developers have found a lot of clever use of negative margins.

For example, he can increase the width of a variable width block box, he can let a box move up to cover another box, he can let the text move to overwrite the text, you can also let the floating box to cover another floating box.

With these features, we can achieve the Holy Grail layout and the dual-wing layout, such as high-layout, multi-column layout, and other practical layout methods.

So how does a negative margin work? In other words, how are these phenomena explained?

That's what I understand:

In the visual format model, everything is a box. all boxes are in a flowing state . Like a small wooden block floating on the water, water will push them into a place.

And the margin is used to intercept . Just like a river is cut into two sections, the latter stream will not affect the small block of water in the previous stream.

Normal flow (normal):

There are block-level formatting contexts and inline-level formatting contexts in the normal stream.

In the block-level formatting context, block-level boxes occupy a full line , arranged from top to bottom . A full line means that if he is not set to a width, he fills the entire containing box horizontally.

So, the stream in the block-level formatting context should look like this:

Therefore, the first P element is set to margin-bottom:10px, which means that the first P element in the border-bottom edge under the position of 10px, set an interception line, block after the box is flowing through the line.

If you set margin-bottom:-10px, The Intercept line will be set in the first paragraph of text border-bottom edge 10px position, then the box will flow from there, that is, will cover the first paragraph of text 10px. According to this logic, in this example, the first paragraph of text set margin-bottom:-10px and give the two paragraph text set margin-top:-10px effect is the same, because they all set the interception line in the same place.

In addition to the longitudinal flow, there are two horizontal streams, one horizontally inside the block-level box, to control his width, and the other to be external to control his flow. Set Margin-left to a block-level box: -10px, then his left outer edge will be set on the left side of the Border-left 10px, he will fill the 10px gap. And if he does not have the width limit at this time, his border-right will not move to ensure his width.

That's why setting a positive margin on a block-level box with an indefinite width will make his width smaller, and setting a negative margin will increase his width. Setting a left negative margin for a fixed-width block-level box will let him move to the left, and setting the right negative margin has no effect on him.

, p1 and P2 are set Margin-left: -10PX,P2 and P3 set the width to 300px,p3 set margin-right:-10px;

In the inline-level formatting context, row-level boxes are arranged horizontally, from left to right or right to left, as determined by the direction property. If there is not enough space left in the current box to load it, he will break, and the extra part should be replaced by the next line. The vertical margin value is not valid for inline-level boxes, which means that the inline-level box is only subjected to a horizontal flow force.

So, the flow in the inline-level formatting context should look like this:

Take direction:ltr as an example, set Margin-left: -20px for the second inline-level box; Margin-right: -20px, the result should be that he and the third row inside the box flow to the left 20px, the third row of the box and move to the left 20px

Floating:

The top edge of the float box is affixed to the top edge of the current row box or the bottom edge of the previous float box, and the left edge of the left float box is pasted to the left edge of the containing box, or to the right edge of the left floating box before him. If the remaining space in the current row does not contain a floating box, he will wrap. (Right floating same)

The bottom line is that, as long as there is enough space and no obstruction, the edge of the floating box must be next to the containing box content edge.

So, the flow of the floating box should look like this:

(three boxes are left floating, including the box has been cleared floating processing, set the width of 500px.) The first floating width is 100%, the second floating width is 150px, and the third floating width is 100px.)

The power of a floating stream pushes it to the content edge of the containing box, that is, if a floating edge is already affixed to the content edge of the containing box, and there is no margin, in that direction he will not be controlled by the flow of force. , the second floating top edge is blocked by the first float, the third floating left edge is blocked by a second float, and the top edge is blocked by the first float.

If the second float is set to margin-left:-20px, his left intercept line will be moved to the position of the first floating border-right to the left 20px:

If the absolute value of the negative of his margin-left is greater than his own width, it means that his upper edge is no longer constrained by the first float, the left intercept line is moved to a position sufficient to hold him, he moves up one line, and the third float is pushed to the left until it touches the left edge of the containing box:

This time the second floating negative margin increase will let him continue to move to the left, and the third float will not be affected, because its left edge has been affixed to the content of the containing box of the left edge, no strength will let him move left, unless he set a negative margin value, When this value is enough for his upper border to please the first floating barrier, it will also move up:

Absolute positioning:

The absolutely positioned box is completely out of the ordinary flow, so he has no effect on any other box, which means that his margin-left and Margin-top will let him move around and up and down, while Margin-right and Margin-bottom will not have any effect.

Summarize:

The margin is used for interception, and the margin determines which side of the border line The Intercept line is on (up or down). After the closure of the element is motionless, where to move, or to see itself in which kind of flow.

Explore the principle of negative margin (negative margin)