La regla del reloj para margins, paddings y borders

La regla del reloj para margins, paddings y borders

5
(1)

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:

regla del reloj css
resumen explicativo propiedades shorthand para margin, padding, border

¡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!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media 5 / 5. Votos: 1

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

¿Dónde he fallado?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No Comments

Post A Comment