Remember that margins (margin), padding (padding), and border (border) settings are set in a clockwise direction, up or down in four directions, in the box model: upper right bottom left. Examples of specific applications in margin and padding are as follows:
margin:10px 15px 12px 14px;/* set to 10px, right set to 15px, lower set to 12px, left set to 14px*/
There are three abbreviations that are commonly used:
1. If the values of top, right, bottom, and left are the same, such as the following code:
margin:10px 10px 10px 10px;
can be abbreviated as:
margin:10px;
2. If the top and bottom values are the same, left and right values are the same, as in the following code:
margin:10px 20px 10px 20px;
can be abbreviated as:
margin:10px 20px;
3. If the values of left and right are the same, such as the following code:
margin:10px 20px 30px 20px;
can be abbreviated as:
margin:10px 20px 30px;
Note: The abbreviated method of padding and border is consistent with margin.
Box Model Code Shorthand