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; */
;

This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.