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

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.