La regla del reloj para margins, paddings y borders

La regla del reloj para margins, paddings y borders

Print Friendly, PDF & Email
La regla del reloj para margins, paddings y borders
5 (100%) 1 voto

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!

Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.