Margen vs Padding: reglas del sistema

Un desarrollador apila una tarjeta encima de un encabezado. La tarjeta tiene margin-bottom: 24px, el encabezado tiene margin-top: 16px, así que el hueco debería ser de 40px. El navegador renderiza 24. Sin error, sin advertencia: el margen de 16px simplemente ha desaparecido, absorbido por un comportamiento de CSS llamado colapso de márgenes (margin collapsing) que la mayoría descubre exactamente así, como un hueco misterioso que no cuadra con la aritmética de ninguno de los dos elementos.

El padding es el espacio dentro del borde de un elemento; el margen es el espacio fuera de él. La regla que mantiene componible un sistema de diseño va un paso más allá: el padding pertenece al componente —es parte de lo que el componente es— mientras que el margen pertenece al layout —una afirmación sobre dónde se coloca el componente. Un botón posee su padding igual que posee su radio de borde; no debería tener ninguna opinión sobre su distancia con los vecinos.

Este artículo cubre la definición del modelo de caja, la regla de propiedad que importa más que la definición, el comportamiento de colapso detrás de esos 16px desaparecidos, y el patrón de gap gestionado por el padre que evita por completo el colapso, con cada distancia tomada de la misma escala de espaciado.

¿Cuál es la diferencia entre margen y padding en CSS?

En el modelo de caja de CSS, cada elemento es un conjunto de rectángulos anidados: contenido, luego padding, luego borde, luego margen. El padding va dentro del borde, así que toma el color de fondo del elemento, extiende su área clicable y —con box-sizing: border-box— cuenta para el ancho declarado del elemento. El margen va fuera del borde: siempre transparente, nunca clicable y, en apilamientos verticales, capaz de fusionarse con los márgenes vecinos.

Una forma compacta de retener la distinción: el padding cambia cómo se ve el elemento; el margen cambia cómo se relaciona con todo lo que lo rodea. Esa asimetría es la razón por la que ambos merecen propietarios distintos.

¿Cuándo deberías usar margen y cuándo padding?

Toma un botón. Su padding —digamos 11px vertical, 16px horizontal— es parte de su identidad: es lo que hace que el botón se sienta como el mismo botón en una barra de herramientas, un formulario y un diálogo. Su distancia al siguiente elemento no es parte de su identidad. En una barra de herramientas densa el hueco correcto podría ser de 8px; entre campos de formulario, 16px; debajo de un párrafo hero, 32px. Si el botón se entrega con margin-right: 16px, es correcto en uno de esos lugares y equivocado en los demás, y cada lugar equivocado hace crecer una anulación. Multiplícalo por cincuenta componentes y la hoja de estilos se convierte en una discusión entre componentes sobre un espacio que ninguno de ellos debería poseer.

De ahí la regla del sistema: los componentes definen su padding y nunca sus márgenes externos; los contenedores definen las distancias entre sus hijos. Cualquier componente puede entonces colocarse en cualquier layout sin negociación, que es la mayor parte de lo que significa “componible” para el espaciado.

Mira los dos roles en una sola escala en Scale Composer: los pasos pequeños (8, 11, 16) hacen el trabajo interior como padding de componente, mientras que los pasos mayores (16, 23, 32, 45) hacen el trabajo exterior como huecos de layout, todos generados a partir de una base y una razón.

¿Por qué colapsan los márgenes verticales?

Cuando dos elementos de bloque se apilan en el flujo normal del documento, sus márgenes verticales adyacentes no se suman: se fusionan en un solo margen igual al mayor de los dos:

El comportamiento es deliberado. CSS se diseñó para documentos, donde los párrafos llevan margen arriba y abajo; si esos márgenes se sumaran, cada par de párrafos quedaría a doble espacio. Colapsar al valor mayor le da al texto corrido un ritmo uniforme sin coste alguno. En el layout de una aplicación, el mismo comportamiento se lee como un error: dos valores explícitos producen un tercer valor que no aparece en ninguna hoja de estilos. También tiene variantes menos conocidas —el margen superior de un hijo puede colapsar a través del borde de su padre y empujar hacia abajo todo el contenedor del padre—, por lo que “¿de dónde sale este hueco?” sigue siendo un género de depuración tan perdurable.

Dos límites útiles: los márgenes horizontales nunca colapsan, y los hijos de contenedores flex y grid nunca colapsan en ninguna dirección.

¿Qué deberías usar en lugar de márgenes entre hermanos?

Dale el espacio al padre. Los contenedores flex y grid tienen una propiedad gap que coloca una distancia fija entre los hijos: sin colapso, sin excepciones de primer y último hijo, sin opiniones de componente:

.stack {
  display: flex;
  flex-direction: column;
  gap: 16px;      /* entre los hijos */
  padding: 23px;  /* entre los hijos y el borde del contenedor */
}

La división del trabajo queda limpia: el padding del contenedor gestiona la distancia desde su borde hasta su contenido, gap gestiona las distancias entre los hijos, y cada hijo gestiona solo su propio padding. Cada distancia en la pantalla tiene exactamente un propietario, y la clase de error del hueco misterioso pierde su hábitat.

Los márgenes no abandonan la caja de herramientas por completo. La prosa es la excepción permanente: allí la distancia correcta depende del par —de encabezado a párrafo difiere de párrafo a párrafo— y el gap uniforme de un contenedor no puede variar por par. Entre componentes, sin embargo, el gap gestionado por el padre es el patrón sobre el que han convergido la mayoría de los layouts modernos.

¿Deberían margen, padding y gap compartir una sola escala?

Sí: son la misma decisión de diseño (¿a qué distancia se sitúan las cosas?) en manos de propietarios distintos, así que deberían tomarse del mismo menú corto. Una escala de espaciado generada a partir de una base de 16px, razón 2 y dos notas por cada duplicación da 8, 11, 16, 23, 32, 45, 64: el extremo pequeño cubre el padding dentro de componentes compactos, el medio cubre los huecos entre elementos, y el extremo grande cubre las secciones. Cuando las distancias interiores y exteriores vienen de una sola escala, el padding de una tarjeta y el hueco entre tarjetas se mantienen proporcionales aunque los definan propietarios distintos.

¿Quién posee cada distancia a escala de página?

La regla de propiedad rinde de forma más visible en una página completa, donde de otro modo docenas de huecos serían docenas de decisiones locales. Los medianiles son la idea del gap gestionado por el padre aplicada a todo el layout: las columnas no poseen sus distancias, lo hace la rejilla: 4 columnas en móvil, 8 en tablet, 12 en escritorio, cada medianil y cada margen un paso en la misma escala. Cuando puedes nombrar al propietario de cada distancia de la página, la cuestión de margen vs padding se ha respondido sola: recorre los medianiles y los márgenes por esta escala en la vista de rejilla.