What's the Shorthand for the CSS padding Property?

CSS padding property can be written in shorthand form in the following ways:

1. As a Single Value;
2. As Two Values;
3. As Three Values;
4. As Four Values.

CSS padding Shorthand With One Value

When only one value is specified for padding, it applies the value to all four sides:

padding: 10px; /* padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; */

CSS padding Shorthand With Two Values

When two values are specified for padding:

1. First value applies to the top and bottom padding;
2. Second value applies to the left and right padding.

For example:

padding:
    10px /* padding-top: 10px; padding-bottom: 10px; */
    20px /* padding-right: 20px; padding-left: 20px; */
;

CSS padding Shorthand With Three Values

When three values are specified for padding:

1. First value applies to the top padding;
2. Second value applies to the left and right padding;
3. Third value applies to the bottom padding.

For example:

padding:
    10px /* padding-top: 10px; */
    20px /* padding-right: 20px; padding-left: 20px; */
    30px /* padding-bottom: 30px; */
;

CSS padding Shorthand With Four Values

When four values are specified for padding:

1. First value applies to the top padding;
2. Second value applies to the right padding;
3. Third value applies to the bottom padding;
4. Fourth value applies to the left padding.

For example:

padding:
    10px /* padding-top: 10px; */
    20px /* padding-right: 20px; */
    30px /* padding-bottom: 30px; */
    40px /* padding-left: 40px; */
;