What Is the Order of the CSS margin Shorthand Property?

The CSS margin 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:

margin: 10px; /* All sides: 10px */

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

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

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