margin

El margin es el espacio exterior que rodea a un elemento, situado fuera del border, y su propósito es separar ese elemento de todo lo que lo rodea: otros elementos hermanos, los bordes del contenedor, el borde del viewport. A diferencia del padding, el margin no pertenece al elemento en ningún sentido visual: el background-color, la imagen de fondo o cualquier decoración del elemento nunca se extiende hasta el margin — esa área siempre es transparente, deja ver lo que hay debajo (el fondo del contenedor o la página).

Esto tiene una implicancia importante: el margin no amplía el área interactiva de un elemento. Si un <button> tiene margin: 20px, ese espacio alrededor no es “parte del botón” — no responde a clics. Es simplemente aire entre el botón y sus vecinos. Para ampliar el área clicable, se usa padding.

El margin también es la única capa del box model que acepta el valor auto y valores negativos, lo que lo convierte en una herramienta de layout con más variantes que el padding. El valor auto distribuye espacio sobrante automáticamente — la base del patrón clásico de centrado horizontal. Los valores negativos permiten desplazar elementos o superponer cajas de formas que el padding nunca podría lograr.

Cómo funciona

El margin se aplica fuera del border y nunca entra en el cálculo de box-sizing — es siempre espacio externo independientemente de si se usa content-box o border-box. Lo que sí ocurre con el margin en el flujo normal es el colapso vertical: cuando dos elementos en bloque están uno encima del otro, sus margins verticales no se suman sino que se fusionan, y el espacio entre ellos resulta igual al mayor de los dos. Este comportamiento, aunque sorpresivo, tiene lógica: el margin declara “quiero al menos X espacio junto a mí”, no “agrego X espacio acumulativo”.

Sintaxis

/* Un valor: los cuatro lados iguales */
margin: 24px;

/* Dos valores: arriba/abajo · izquierda/derecha */
margin: 16px 32px;

/* Tres valores: arriba · izquierda/derecha · abajo */
margin: 8px 24px 16px;

/* Cuatro valores: arriba · derecha · abajo · izquierda (sentido horario) */
margin: 8px 16px 24px 0;

/* Centrado horizontal */
margin: 0 auto;

/* Valor negativo: desplaza el elemento hacia su vecino */
margin-top: -20px;

Valores

Longitudes (px, em, rem, %)

Las unidades de longitud funcionan igual que en padding. El porcentaje siempre referencia el ancho del elemento contenedor, también para margin-top y margin-bottom.

auto

Distribuye el espacio sobrante disponible en el eje horizontal. Es el valor más especial del margin:

• margin: 0 auto en un elemento en bloque con width declarado centra horizontalmente ese elemento dentro de su contenedor. El navegador calcula cuánto espacio sobra y lo divide en partes iguales entre izquierda y derecha.
• margin-left: auto empuja el elemento completamente hacia la derecha.
• auto en el eje vertical (margin-top: auto o margin-bottom: auto) no funciona en el flujo normal — el valor computa como 0. Sí funciona en flexbox e grid donde el motor de alineación lo interpreta.

/* Patrón clásico de centrado horizontal */
.contenedor {
  width: 800px;
  max-width: 100%;
  margin: 0 auto;
}

Valores negativos

El margin admite valores negativos — algo que el padding nunca permite. Un margin-top: -20px tira el elemento 20px hacia arriba, superponiéndolo parcialmente con el elemento anterior. Un margin-left: -10px expande el elemento hacia la izquierda, fuera de su contenedor natural.

Los margins negativos son una técnica de layout real: se usan para “sangrar” contenido fuera de un contenedor con padding, para superponer elementos en patrones de tarjetas, o para compensar espaciados heredados. Son poderosos pero fáciles de abusar — cuando hay dudas, transform: translate suele ser más claro.

/* Sangrar un elemento fuera del padding del contenedor */
.contenedor { padding: 24px; }
.full-bleed  { margin: 0 -24px; }  /* cancela el padding izq/der */

Lados individuales

Además del shorthand, cada lado tiene su propiedad:

Regla de expansión del shorthand (1–4 valores)

El shorthand sigue el mismo patrón TRBL (Top → Right → Bottom → Left) que padding:

Colapso de margins verticales (margin collapsing)

El colapso de margins es el comportamiento más sorpresivo del box model, pero también uno de los más importantes de entender. En flujo normal, cuando dos elementos en bloque están uno encima del otro y sus margins verticales se tocan, esos margins no se suman — el mayor absorbe al menor.

<p style="margin-bottom: 32px">Párrafo uno</p>
<p style="margin-top: 16px">Párrafo dos</p>

→ El espacio entre los dos NO es 32 + 16 = 48px
→ El espacio ES max(32, 16) = 32px

La intuición correcta: los margins verticales son “promesas de espacio mínimo”, no contribuciones acumulativas. El margin-bottom: 32px del primero dice “quiero al menos 32px debajo de mí”. El margin-top: 16px del segundo dice “quiero al menos 16px arriba de mí”. Entre las dos promesas, la mayor (32px) satisface a ambas.

Cuándo el colapso NO ocurre

El colapso es específico del flujo normal y requiere que los margins se “toquen” sin ninguna separación:

• Flexbox y grid: los elementos dentro de un contenedor display: flex o display: grid nunca colapsan margins entre sí.
• Cuando hay padding o border entre el margin del padre y el del primer/último hijo: si el padre tiene padding-top: 1px o border-top: 1px solid, el margin del hijo no colapsa con el del padre.
• Con overflow: hidden o overflow: auto en el contenedor: el contexto de formato que crean evita el colapso padre-hijo.
• Los margins horizontales nunca colapsan, sin excepción.
• Elementos flotantes y posicionados absolutamente no colapsan con sus vecinos.

Ejemplo realista

/* Layout de artículo: contenedor centrado, secciones con espacio vertical */
.articulo {
  max-width: 720px;
  margin: 0 auto;       /* centrado horizontal */
  padding: 0 24px;
}

.seccion + .seccion {
  margin-top: 48px;     /* espacio entre secciones */
}

/* Nota: si las secciones tienen margin-bottom: 24px también,
   el espacio resultante entre ellas será max(48, 24) = 48px */

Cuándo usarlo

Usá margin cuando querés espacio fuera del elemento, entre él y sus vecinos o el contenedor. La regla práctica:

Notas, gotchas e interacción

• El margin es siempre transparente. background-color nunca colorea el margin — solo llega hasta el límite exterior del border.
• Colapso solo en vertical, solo en flujo normal. Los margins horizontales nunca colapsan. En flexbox/grid, ningún margin colapsa. Fuera de esos contextos, el colapso es la regla, no la excepción.
• margin: auto en el eje vertical no funciona en flujo normal. margin-top: auto computa a 0 en un elemento en bloque normal. Para centrado vertical se usan flexbox o grid.
• El margin no forma parte del área interactiva. A diferencia del padding, el margin alrededor de un <button> o <a> no responde a clics ni eventos táctiles.
• Interacción con box-sizing: el margin nunca entra en el cálculo de box-sizing. Siempre es espacio externo, independientemente del valor de esa propiedad.
• Navegadores aplican margins por defecto a elementos como <p>, <h1>–<h6>, <ul>, <body>. Un reset CSS elimina estos margins para empezar desde cero y tener control total del espaciado.

Vigente / legacy

No hay forma legacy. margin y sus propiedades individuales son parte del CSS desde sus primeras versiones. Las propiedades lógicas (margin-block-start, margin-inline-end, etc.) son una adición más reciente que permiten margins relativos a la dirección del texto (útil para internacionalización), pero son un complemento, no un reemplazo.