Cómo recordar facil las propiedades acortadas CSS

En CSS tenemos cuatro valores que podemos incluir en las propiedades de Margin y de Padding, podemos escribirlo en su forma “larga”:

margin-top:100px;
margin-right:100px;
margin-bottom:50px;
margin-left:50px;


o en su forma abreviada o acortada:

margin: 100px 100px 50px 50px;

Lo cierto es que es difícil recordar el orden cuando empezamos con CSS, por lo que una buena opción es anotárselo en un machete. Pero hace poco me encontré con la técnica de Pablo de Kabytes, la cual consiste en utilizar como referencia el movimiento de las agujas de un reloj. De este modo, utilizamos como referencia la posición en que las manecillas parten de las 12hs (top=), luego se mueven a las 3hs (right=), pasando por las 6hs (bottom=) y finalmente llegando a las 9hs (left=).

Por si queda alguna duda, el siguiente gráfico puede llegar a ayudarlos.

Finalmente hay otras reglas para acortar un poco más difíciles de acortar. Pueden ir a parar directo a tu machete hasta que las recuerdes sin problemas.

• margin:25px 50px 75px;
  • margin top es 25px
  • margin right y margin left son 50px
  • margin bottom es 75px
• margin:25px 50px;
  • margin top y margin bottom son 25px
  • margin right y margin left son 50px
• margin:25px;
  • los cuatro margin son 25px