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

This article mainly explains "the behavior expression method of CSS negative margin". The explanation content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "the behavior expression method of CSS negative margin".

Negative margins in CSS

Margin can be set to a negative value, which will help you achieve the effect of being close to the top / left adjacent elements, or near the bottom / right adjacent elements.

Let's start with our test element: a simple container element with three paragraphs. Notice that the paragraph has a fixed width 250px.

First paragraph with a bit of text in it to provide some content.

Second paragraph with a bit of text in it to provide some content.

Third paragraph with a bit of text in it to provide some content.

* {box-sizing: border-box;}

.container {

Border: 5px double

Width: 300px

Padding: 0 10px

}

.container p {

Border: 1px solid

Width: 250px

}

Effect:

Negative margin margin-top/bottom

First give the first paragraph of the text margin-bottom:-15px, as a result, the second paragraph of the text has been recalculated by the browser, raising the 15px up.

The second paragraph text follows the first paragraph text as a neighbor, the distance between the second paragraph text and the third paragraph text does not change, and the overall layout is still vertical.

This technique is suitable for fine-tuning the position, and can be used if an element wants to slightly cover the previous element.

Now restore the layout and show the second paragraph of text margin-top:-15px.

As you can see, it has the same effect as using margin-bottom:-15px in the first paragraph of text. The second paragraph of the text is promoted to 15px here. By viewing it in the browser console, the margin-bottom of the first paragraph of text is still the default 1rem.

Margin merging (Margin collapsing)

The behavior of margin collapse is different on the negative margin.

For the negative margin scene: if one of the adjacent elements is a positive margin and the other is a negative margin, then the adjacent spacing (adjoining margin) = positive margin-negative margin absolute value (the result of the intersection and separation of the two elements depends on whose absolute value is larger); if there is no positive margin between the two adjacent elements, the adjacent margin = 0-margin 1 absolute value-margin 2 absolute value (the result two elements intersect).

For positive margins, the rule is this: the browser will compare the margin-bottom of the first paragraph of text with the margin-top of the second paragraph of text. Whoever has a larger value will have the final spacing. Take margin-bottom: 16px and margin-top: 4px as an example, then the final spacing will be 16px. This is not the case for scenarios with negative margins, such as the above one is margin-bottom: 1em (assuming 16px) and the other is margin-bottom:-15px, then according to the rule, the final spacing is 16px-15px, resulting in 1px, which indicates the distance between the two from the 1px because it is a positive value.

As you can see, we can use negative margins to achieve a layout where two elements are close to each other without being affected by margin merging.

At this point, it is the end of the introduction of negative margin margin-top/bottom.

Negative margin margin-left/right

Negative margins margin-left/right works in the same way as margin-top/left, with elements still having a fixed width. Let's set margin-left:-10px and margin-right:-10px for the first and second text paragraphs, respectively.

As you can see, the first paragraph shifts 10px to the left, the width remains the same, and the right edge moves 10px to the left.

The negative margin-right value of the second paragraph does not work. Because the negative value of margin-right affects the element on the right side of the second paragraph, there are no elements to the right of the current second paragraph, so you can't see the effect.

To show the negative effect of margin-right, you need to set the paragraph element to float so that there are adjacent elements on the right.

Now set the negative margin on the paragraph.

As you can see, because the first paragraph sets margin-right:-10px, the second paragraph offsets 10px to the left. This is the same effect as the negative value of margin-bottom seen earlier.

At the same time, the second paragraph sets margin-top:-10px, so the 10px is offset up. The third element sets margin-bottom:-10px, but has no effect because there is no element at the bottom.

Note: margin-bottom:-10px has an impact, and the effect does not come out just because there is no element at the bottom-- if we delete the first element, we can see that the parent element is highly collapsed, and the height of the collapse is exactly equal to the absolute negative margin of the third paragraph element, namely 10px (figure below). The reason why it did not collapse before is that the height of the first element stretches open the parent element, so that the height of the parent element cannot collapse.

GIF.gif

It should be noted that margin merging only applies to margin-top and margin-bottom attributes and does not work on margin-left and margin-right, so you don't have to worry about merging left and right margins here.

If we just set margin-left:-10px for the second paragraph, we can see the same effect.

As you can see, in the case of element width, the behavior of negative values of margin-left and margin-right is the same as that of negative values of margin-top and margin-bottom.

Width: negative values for auto and margin-right

Instead of setting a fixed width for paragraphs, let them use the default width: auto setting to observe the negative behavior of margin-right. By default, width: auto paragraph elements are filled with the width of the parent element by default and are limited by the padding of the parent element.

Now set margin-left:-10px and margin-right:-10px for the first and second paragraphs, respectively, and set margin-left:-10px and margin-right:-10px for the third element to view the effect. Note that for ease of comparison, a reference element (Reference paragraph) is added here:

It is found that the first paragraph shifts 10px to the left, the width increases, the right edge is not affected, and the position remains unchanged; the second paragraph shifts 10px to the right, the width increases, the left edge is not affected, and the position remains unchanged. This happens only under width: auto, which is different from the behavior of fixed-width elements.

The third paragraph uses negative margins at both ends of the left and right sides, causing both sides to extend the distance of the 10px outward, just offsetting the padding of the left and right 10px of the container element. This is the most common application scenario for negative margins-in order to maintain a certain margin between the content and the container, the container sets padding, but a title in the content needs to be extended to the width of the entire container (regardless of external padding values), so it's time to use negative margins.

The style of the above structure is posted here (the container element has padding: 10px set).

H6 {margin-left:-10px; margin-right:-10px; padding-left: 10px; margin-top: 0; margin-bottom: 0; background-color: grey; color: white; / * no width, so defaults to width: auto * /} copy the code

Again, this only works in the case of the title element width: auto, but it already covers 99% of the actual usage scenarios.

Thank you for your reading, the above is the content of "the behavior expression method of CSS negative margin". After the study of this article, I believe you have a deeper understanding of the behavior expression method of CSS negative margin, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.