Padding, margin, border-width and the like are all rules of this kind (can be understood in this way, but it seems that the standard is not written this way) Four values The first value controls Up, down, left, and right, the second value controls left and right, the third value controls down, and the fourth value controls left. At the same time, the later value will overwrite the earlier value.
============================================ Just now I looked through w3c (link) This is what it said
The 'padding' property is a shorthand property for setting 'padding-top', 'padding-right', 'padding-bottom', and 'padding-left' at the same place in the style sheet.
If there is only one component value, it applies to all sides. If there are two values, the top and bottom paddings are set to the first value and the right and left paddings are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively .
Top padding, right padding, bottom padding, left padding in order If there is only one value, then it is applied in all (four) directions If there are only two values , then the first value is the top and bottom padding, and the second value is the right and left padding If there are only three values, the first value is the top padding, and the second value is the left and right margins, The third value is the bottom padding . If there are four values, the order is, top padding, right padding, bottom padding, left padding
Padding, margin, the control of these two attributes are similar, but the range of control is different. Padding is the inner margin, that is, the range from content to border. Margin is the outer margin, which is the size of the range outside the border. Generally speaking. It can have four values, namely top (top), right (right), bottom (bottom), left (left), in the clockwise direction. If it is a value: it means that the top, right, bottom and left are all this value. If there are two values: the first value is up and down, and the second value is left and right. If there are three values: the first one is up and down, the second value is right, and the third one is left. If there are four values: first, second, third and fourth, they are the values for top, right, bottom and left respectively.
So the difference between padding:0 2em 1em and padding:0 0 2em 1em is The first one: up and down is 0, right is 2em, and left is 1em. Second one: Top is 0, right is 0, bottom is 2em, left is 1em.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Padding, margin, border-width and the like are all rules of this kind (can be understood in this way, but it seems that the standard is not written this way)
Four values
The first value controls Up, down, left, and right, the second value controls left and right, the third value controls down, and the fourth value controls left.
At the same time, the later value will overwrite the earlier value.
============================================
Just now I looked through w3c (link)
This is what it said
The 'padding' property is a shorthand property for setting 'padding-top', 'padding-right', 'padding-bottom', and 'padding-left' at the same place in the style sheet.
If there is only one component value, it applies to all sides. If there are two values, the top and bottom paddings are set to the first value and the right and left paddings are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively .
Top padding, right padding, bottom padding, left padding in order
If there is only one value, then it is applied in all (four) directions
If there are only two values , then the first value is the top and bottom padding, and the second value is the right and left padding
If there are only three values, the first value is the top padding, and the second value is the left and right margins, The third value is the bottom padding
. If there are four values, the order is, top padding, right padding, bottom padding, left padding
Top, right, bottom, left. If any one is not written, it will be the same as the opposite.
top right bottom left
top (right & left ) bottom
(top & bottom )(right & left )
(all)
padding:2em 2em 0;is equivalent topadding:2em 2em 0 2em;(if you don’t set a value for “left”, it will be the same as your “right” value by default)Padding, margin, the control of these two attributes are similar, but the range of control is different.
Padding is the inner margin, that is, the range from content to border.
Margin is the outer margin, which is the size of the range outside the border.
Generally speaking. It can have four values, namely top (top), right (right), bottom (bottom), left (left), in the clockwise direction.
If it is a value: it means that the top, right, bottom and left are all this value.
If there are two values: the first value is up and down, and the second value is left and right.
If there are three values: the first one is up and down, the second value is right, and the third one is left.
If there are four values: first, second, third and fourth, they are the values for top, right, bottom and left respectively.
So the difference between padding:0 2em 1em and padding:0 0 2em 1em is
The first one: up and down is 0, right is 2em, and left is 1em.
Second one: Top is 0, right is 0, bottom is 2em, left is 1em.
The settings of margin and padding follow clockwise rotation,
for example
You can refer to the figure below for the number of different parameters:
