Regla del reloj para recordar las propiedades acortadas CSS

Hace un tiempo mencionaba en otra entrada sobre propiedades acortadas: Consejo para cargar la página mas rápido.

De que se trata acortar las propiedades.

General mente en nuestra plantilla las propiedades están de esta manera, o cuando recien empezamos con CSS:

margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 25px;

Acortadas o agrupadas en una sola propiedad quedan así:

margin: 10px 15px 20px 25px;

En el ejemplo es fácil darse cuenta que posición ocupa cada medida pero cuando estamos trabajando en CSS puede que no lo recordemos con tanta facilidad. Podemos seguir una regla, la regla del reloj, que nos ayudará a no confundirnos.

Esta regla se utiliza tanto con margin como con padding, también en algunos casos con border.

Para que se entienda mejor mostrare unas imágenes.
Los ejemplos están con margin y padding.

Como ven en la imagen:

• el 12 es arriba (top),
• el 3 es la derecha (right),
• el 6 es abajo (bottom)
• y el 9 es la izquierda (left).

Para recordar mejor la regla del reloj:

Básicamente, el primero es el margen superior y todo se va a la derecha, abajo y de izquierda.

Para acortar y recordar:

Tenemos 4 parámetros que empieza a partir de las 12 horas o la parte superior del margen y va hacia la derecha 3 horas o margen derecho, 6 horas o margen abajo  y las 9 horas el margen izquierdo.

Con 3 parámetros:

Con 2 parámetros:

Con 1 parámetro: