Box Model: outer margin superposition and negative margin

At first glance, the box model is simple. It is nothing more than content, inner margin, border, and outer margin. But when you write the code, you will find that it is not simple, and many places are blurred, especially when the margin is negative.

This document mainly describes two problems:

1. overlay the outer margin

2. The outer margin is a negative value.

 

There are two basic points:

1. if you add a background to an element, the background is applied to the area consisting of content and padding.

2. width and height are the width and height of the content area. Adding the padding, border, and margin does not affect the size of the content area. It only increases the total size of the element box.

In particular, if you set the box-sizing attribute of an element to "border-box", width and height indicate the height and width of the area composed of content, padding, and border. Therefore, increasing the margin does not affect the size of the content area. Increasing the padding and border will reduce the size of the content area.

 

Now let's start to discuss the first question: overlay the outer margin.

When two or more vertical margins meet, the height of the margin is equal to the larger of these margins. This is where the outer margin is superimposed, and the outer margin is superimposed only on the vertical outer margin.

There are three scenarios for outer spacing superposition:

L element superposition

L adjacent element superposition

L include element superposition

Element overlay

If there is an empty element with only the outer margin but no border or internal margin, the top and bottom margins are superimposed together.

Adjacent element superposition

When an element appears on another element, the bottom margin of the above element overwrites the top margin of the following element.

Includes element superposition

When an element is included in another element, if no padding or border is separated, their top/bottom margins are also superimposed.

What is the use of Outer margin superposition? The simplest example is a paragraph. If there is no margin overlay, the Section spacing will be twice the space above the first paragraph from the second paragraph.

Note:Only the vertical outer margin of the block box in the normal document flow can overlay the outer margin.The outer spacing between lines, floating boxes, or absolute positioning boxes is not overlapped.

 

Next we will discuss the situation where the margin is negative:

For example, if margin-right:-150px;

Two steps:

1. Assume that margin-right: 0;, and the content area remains unchanged.

 

2. Add margin-right:-150px; the layout is changed

 

So the negative value of margin-right is that the area on the right turns to the margin to accommodate other elements (assuming Element B ). Note that if the outer spacing of the child element in the element is incorrectly set, it will overlap with Element B.

The outer spacing is set to a negative value, which can be used to generate a sidebar.

 

Additional instructions:Only the outer margin can be a negative value, and the inner margin cannot be a negative value.