La regla del reloj para margins, paddings y borders

La regla del reloj es un truco mnemotécnico que nos permite entender de forma fácil las instrucciones shorthand para margins, paddings y borders.

Una propiedad shorthand es la expresión que aglutina varias instrucciones css y las resume.

Por ejemplo en lugar de:

border-width:1px;
border-style:solid;
border-color:#000;

podemos decir

border:1px solid #000;

Expresiones reducidas (abreviadas)

Imaginemos la expresión:

margin-top:5px;
margin-right:10px;
margin-bottom:8px;
margin-left:4px;

se puede abreviar a

margin:5px 10px 8px 4px;

De forma análoga con los padding:

padding-top:5px;
padding-right:10px;
padding-bottom:8px;
padding-left:4px;

se puede abreviar a

padding:5px 10px 8px 4px;

y la expresión:

margin-top:5px;
margin-right:10px;
margin-bottom:8px;
margin-left:10px;

se puede abreviar a

margin:5px 10px 8px;

O también

padding-top:5px;
padding-right:10px;
padding-bottom:5px;
padding-left:10px;

se puede abreviar a

padding:5px 10px;

y
border-top-width:5px;
border-right-width:10px;
border-bottom-width:8px;
border-left-width:10px;

se puede abreviar a

border-width:5px 10px 8px;

O finamente

padding-top:5px;
padding-right:5px;
padding-bottom:5px;
padding-left:5px;

se puede abreviar a

padding:5px;

La regla del reloj

La regla del reloj consiste en leer siempre en este orden

1. top
2. right
3. bottom
4. left

A continuación se asocia ordenadamente a cada uno de los lados en el orden anterior a nuestra figura.

Cada lado tiene su número.

Los lados que no tienen su número los rellenamos por simetría con su lado opuesto.

Veamos una imagen:

¡Hola!

Querido lector,

Espero que a partir de ahora ya no haya ninguna propiedad shorthand que se te resista.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!