What Is the Order of the CSS padding Shorthand Property?

Learn about the ordering of CSS padding shorthand syntax

The CSS padding shorthand property can have four different values. Depending on how many values you specify, the order in which they apply differs:

  • Single Value — applies to all sides;
  • Two Values — First value applies to top/bottom (vertically), and second value applies right/left (horizontally);
  • Three Values — First value applies to top, second value applies to right/left (horizontally), and third value applies to bottom;
  • Four Values — Values are applied in a clockwise order (starting from top — i.e. top, right, bottom, and left).

For example:

padding: 10px; /* All sides: 10px padding */
padding: 10px 20px; /* top and bottom: 10px padding */
                    /* left and right: 20px padding */
padding: 10px 20px 30px; /* top: 10px padding */
                         /* left and right: 20px padding */
                         /* bottom: 30px padding */
padding: 10px 20px 30px 40px; /* top: 10px padding */
                              /* right: 20px padding */
                              /* bottom: 30px padding */
                              /* left: 40px padding */

Hope you found this post useful. It was published . Please show your love and support by sharing this post.