What Is the Order of the CSS padding Shorthand Property?

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