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).