Imagina una galería de arte donde los cuadros están pegados unos contra otros, sin separación. Agobiante, ¿verdad? El espacio entre las cosas no es vacío — es diseño. Y en CSS, ese espacio exterior entre elementos se controla con los márgenes.
Antes de empezar, prueba esto en el editor:
¿Ves esa pequeña separación entre los dos párrafos? No la pusiste tú — la puso el navegador. Todos los navegadores aplican algunos estilos por defecto, incluidos márgenes. El problema es que cada navegador puede hacerlo de forma ligeramente diferente.
Por eso es una práctica muy común en CSS profesional comenzar "reseteando" esos márgenes:
Con esto, partes de cero y tú controlas cada milímetro de separación.
El margen se puede aplicar en cualquiera de los cuatro lados del elemento:
margin-top — margen superiormargin-right — margen derechomargin-bottom — margen inferiormargin-left — margen izquierdoPor ejemplo, para separar un elemento 20 píxeles de lo que está arriba:
Pero escribir cuatro propiedades separadas es tedioso. El shorthand margin acepta hasta cuatro valores siguiendo el orden de las agujas del reloj: arriba, derecha, abajo, izquierda.
Y aquí viene lo inteligente: si algunos valores son iguales, puedes omitirlos:
Memoriza el patrón: piensa en un reloj. Empieza arriba y da la vuelta.
Usando la versión más corta posible del shorthand, aplica un margen de 30px arriba y abajo, y uno de 5px a los lados.
El espacio en blanco no es ausencia — es presencia deliberada...