25 Mar 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
- top
- right
- bottom
- 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!
No Comments