CSS Tutorial: Margin,padding,border

Article Introduction: there are several writing specifications for Margin,padding,border-style in CSS.

When we use CSS, we often see margin:0 0,margin:0 5px,padding:0 5px 10px, and what they study, in web standards, they have the following meanings, which are suitable for attributes such as Margin,padding,border-style in CSS

In the first case, four values are available and their meanings are as follows
Properties: Upper right Down left

In the second case, there are only three values, and they have the following meanings
Properties: Upper right Left

In the third case, there are only two values, and they have the following meanings
Properties: Up and down right left

In the fourth case, there is only one value, and they have the following meanings
Properties: Up and down right left

Note that if the property value is 0, you can not add a cell
Direct is attribute: 0;

If not 0, you must add a cell
such as properties: 10px;

The following is the example in W3school, I directly copycat, hehe

Example 1

Border-style:dotted solid double dashed;

The top border is dotted
Right border is solid line
The bottom border is a double line
The left border is a dashed line

Example 2

Border-style:dotted solid double;

The top border is dotted
The right and left borders are solid lines
The bottom border is a double line

Example 3

Border-style:dotted solid;

The top and bottom borders are dots
The right and left borders are solid lines

Example 4

border-style:dotted;

All 4 borders are dotted

Example 1

margin:10px 5px 15px 20px;

The outer margin is 10px.
The right outer margin is 5px
Lower outer margin is 15px
Left outer margin is 20px

Example 2

margin:10px 5px 15px;

The outer margin is 10px.
The right outer margin and the left outer margin are 5px
Lower outer margin is 15px

Example 3

margin:10px 5px;

The top and outer margins are 10px
The right outer margin and the left outer margin are 5px

Example 4

margin:10px;

All 4 outer margins are 10px

Example 1

padding:10px 5px 15px 20px;

The upper inner margin is 10px
Right inner margin is 5px
The lower inner margin is 15px
Zonne margin is 20px

Example 2

padding:10px 5px 15px;

The upper inner margin is 10px
Right interior margin and left interior margin is 5px
The lower inner margin is 15px

Example 3

padding:10px 5px;

The upper and lower margins are 10px
Right interior margin and left interior margin is 5px

Example 4

padding:10px;

All 4 inner margins are 10px