Box Model Code Shorthand

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