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

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.