Order of values in CSS shorthands

In CSS, some properties (like margin or padding) can be described as shorthands that allow 1, 2 or 4 values.

When you use 1 value, it’s applied to every side:

.box {
  margin: 1em;
}
 
/* is same as */
 
.box {
  margin-top: 1em;
  margin-right: 1em;
  margin-bottom: 1em;
  margin-left: 1em;
}

When you use 2 values, they are applied to top/bottom and then left/right:

.box {
  margin: 1em 2em;
}
 
/* is same as */
 
.box {
  margin-top: 1em;
  margin-right: 2em;
  margin-bottom: 1em;
  margin-left: 2em;
}

and when using all 4 values, they are applied clockwise, starting from the top:

.box {
  margin: 1em 2em 3em 4em;
}
 
/* is same as */
 
.box {
  margin-top: 1em;
  margin-right: 2em;
  margin-bottom: 3em;
  margin-left: 4em;
}

I never remember the order so thinking about clock-wise starting from the top applies to them all - the values repeat once the list runs out.

Or like Jeremy said it:

I learned TRouBLe for top, right, bottom, left.

It made me think about Team Rocket

Prepare for TRouBLe, make margins double. To protect the world from tight spaces To unite all spaces within our <div>s