Here I will use an article by Yi Fei to explain... Let’s talk about the margin attribute from the simplest to the deeper
You can introduce a reference line to help understand this problem. (There is no reference line in W3C.) The reference line here refers to the reference point where the margin moves. This reference point is stationary relative to the box. of. The value of margin is the displacement of the box relative to the reference line.
In the design of CSS margin, the reference lines of top, right, bottom, and left are not consistent in the same category, but are divided into two types of reference lines. The reference lines of top and left belong to the same category, and the reference lines of right and bottom belong to the same category. Belongs to another category.
Here, top is displaced vertically downward using the upper edge of the content of the containing block or the lower edge of the margin of the vertically connected element as a reference line;
left uses the left side of the content of the containing block or the right side of the margin of the horizontally connected element as the reference line to move horizontally to the right.
right uses the right side of the border of the element itself as the reference line to move horizontally to the right;
bottom uses the lower edge of the border of the element itself as the reference line to move vertically downward.
The diagram is as follows:
From the above we can see that top and left are referenced by other elements, while right and bottom are referenced by this element. The displacement direction above refers to the situation when the margin value is positive. If it is a negative value, the displacement direction is in the opposite direction.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Here I will use an article by Yi Fei to explain... Let’s talk about the margin attribute from the simplest to the deeper
You can introduce a reference line to help understand this problem. (There is no reference line in W3C.) The reference line here refers to the reference point where the margin moves. This reference point is stationary relative to the box. of. The value of margin is the displacement of the box relative to the reference line.
In the design of CSS margin, the reference lines of top, right, bottom, and left are not consistent in the same category, but are divided into two types of reference lines. The reference lines of top and left belong to the same category, and the reference lines of right and bottom belong to the same category. Belongs to another category.
Here, top is displaced vertically downward using the upper edge of the content of the containing block or the lower edge of the margin of the vertically connected element as a reference line;
left uses the left side of the content of the containing block or the right side of the margin of the horizontally connected element as the reference line to move horizontally to the right.
right uses the right side of the border of the element itself as the reference line to move horizontally to the right;
bottom uses the lower edge of the border of the element itself as the reference line to move vertically downward.
The diagram is as follows:
From the above we can see that top and left are referenced by other elements, while right and bottom are referenced by this element. The displacement direction above refers to the situation when the margin value is positive. If it is a negative value, the displacement direction is in the opposite direction.