Imaginemos el siguiente ejemplo:

h1 { margin: 1em 2em 3em 4em; }

La gente que comienza con CSS tiende a confundir o no recordar el orden de las medidas para las formas abreviadas.

Voy a comentar dos trucos para que sea fácil recordar dicho orden.

  1. TRouBLe (por Chris Coyier): La traducción vendría a ser “problemas, apuros, molestia”, una buena forma de recordarlo. La letra mayúscula indica el orden T(top)R(right)ouB(bottom)L(left)e.
  2. Agujas de reloj: Mi forma preferida, creo haberla leído en algún libro. Simplemente tienes que pensar en el orden en el que se mueven las agujas del reloj: en punto (top), y cuarto (right), y media (bottom), menos cuarto (left). Este método también puede aplicarse a las formas simplificadas donde se omiten algunos valores.
  3. Reloj y Espejo: Si usamos formas simplificadas y omitimos valores, podemos seguir pensando en la dirección de las agujas del reloj y cuando omitamos un valor se obtendra su reflejo (efecto de espejo) tal cual comenta Javi.

Una paranoya de post… es más fácil verlo o imaginarlo que ponerlo con palabras 😛