Cuando empezamos con CSS, tendemos a poner las propiedades así:

margin-top: 1px;
margin-right: 1px;
margin-bottom: 1px;
margin-left: 1px;

Pero, podemos agrupar todos estos valores en una sola propiedad, esto se suele llamar shorthand – Podéis ver esta guía para recordar valores en CSS Shorthand -. En el ejemplo anterior, quedaría así:

margin: 1px 1px 1px 1px ;

Esto simplifica mucho el modo de definir las propiedades, pero para los principiantes resulta muy lioso. Podemos seguir una regla, la regla del reloj, que nos ayudará a no confundirnos. En el reloj que os voy a mostrar a continuación, el color rojo (el de las 12) es el equivalente a margin-top, el verde (el de las 3) es el equivalente a margin-right, el rosa (el de las 6) es el equivalente a margin-bottom, y finalmente, el amarillo (el de las 9), es el correspondiente a margin-left.

Con 3 parámetros:

Con 2 parámetros:

Con 1 parámetro:

Esto también se puede aplicar al padding (espaciado), de la misma forma que lo hemos hecho con margin (márgenes).



Sigue la onda…

Puedes recibir gratis más artículos por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!