CSS / padding y margin: espacios, ancho y colapso de márgenes

En CSS, padding es el espacio entre el contenido y el borde, mientras que margin está fuera del borde. Use padding para expandir el interior de un elemento, incluyendo su fondo, y margin para ajustar su separación de los elementos circundantes. El ancho resultante depende de box-sizing, y los márgenes verticales elegibles pueden colapsar en lugar de simplemente sumarse.

Diferencias entre padding y margin

La caja de un elemento consiste en contenido, padding, borde y margin, en ese orden de adentro hacia afuera. Su fondo normalmente se extiende a través del padding, mientras que el margin es transparente. Aumentar el padding de un botón generalmente expande su fondo y la zona clicable; agregar margin no hace que ese espacio exterior sea clicable.

Ambas propiedades aceptan valores como px, rem y %, pero padding: auto y el padding negativo no son válidos. Para las propiedades de espaciado físico de un modo de escritura horizontal ordinario, los valores en porcentaje se refieren al ancho del bloque contenedor, incluyendo los valores superior e inferior. No son un porcentaje de su altura. Definiciones del modelo de caja y espaciado W3C

Leer las direcciones de la notación abreviada

Una notación abreviada de cuatro valores comienza en la parte superior y continúa en el sentido de las agujas del reloj: derecha, inferior, izquierda. Dos valores significan vertical y horizontal; tres significan superior, horizontal, inferior. La misma regla se aplica al padding y al margen.

Para un lado, use una propiedad como padding-top o margin-left. Una notación abreviada posterior padding o margin puede sobrescribir los valores del lado declarados anteriormente, así que verifique el orden de las reglas.

Comprobar el ancho con un ejemplo completo

Guarde el código completo a continuación como spacing.html en UTF-8 y ábralo en un navegador. No se necesita ninguna biblioteca o servidor. Alpha, Beta y las otras palabras son etiquetas de comparación. Después de editar, guarde y recargue. Seleccione cada .box en las herramientas de desarrollador e inspeccione su diagrama del modelo de caja o los estilos calculados para verificar anchos y espacios.

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparar padding y margin</title>
  <style>
    body { font-family: sans-serif; max-width: 640px; margin: 0 auto; padding: 16px; }
    h2 { font-size: 1.1rem; }
    .stage { padding: 12px; border: 1px dashed #777; overflow-x: auto; }
    .box { width: 200px; padding: 16px; border: 4px solid #17324d; margin: 24px; background: #dcefff; }
    .content-box { box-sizing: content-box; }
    .border-box { box-sizing: border-box; }
    .asymmetric { box-sizing: border-box; padding: 8px 16px 24px 32px; margin: 10px 20px 30px 40px; }
    .center { box-sizing: border-box; margin: 0 auto; }
    .collapse-demo { display: flow-root; border: 1px dashed #777; }
    .item { height: 30px; background: #dcefff; }
    .first { margin: 0 0 24px; }
    .second { margin: 16px 0 0; }
  </style>
</head>
<body>
  <h1>Comparar padding y margin</h1>
  <h2>content-box</h2>
  <div class="stage"><div class="box content-box">Alpha</div></div>
  <h2>border-box</h2>
  <div class="stage"><div class="box border-box">Beta</div></div>
  <h2>padding / margin</h2>
  <div class="stage"><div class="box asymmetric">Gamma</div></div>
  <h2>margin: 0 auto</h2>
  <div class="stage"><div class="box center">Delta</div></div>
  <h2>margin-bottom / margin-top</h2>
  <div class="collapse-demo">
    <div class="item first">A</div>
    <div class="item second">B</div>
  </div>
</body>
</html>

El ancho de Alpha, incluido el borde, es 200 + 16 × 2 + 4 × 2 = 240px. Al sumar sus márgenes horizontales, ocupa 240 + 24 × 2 = 288px. Beta usa border-box: su ancho incluido el borde es 200px y su contenido mide 200 - 16 × 2 - 4 × 2 = 160px. Estos cálculos no incluyen el padding ni el borde del elemento exterior stage.

Gamma tiene 8px de relleno en la parte superior, 16px a la derecha, 24px en la parte inferior y 32px a la izquierda. Sus márgenes son 10px, 20px, 30px y 40px en el mismo orden. Compare las diferencias visibles con las direcciones abreviadas anteriores.

Elegir el cálculo del tamaño con box-sizing

Con content-box, width especifica el ancho del contenido, con el padding y el borde añadidos fuera de él. Con border-box, el ancho especificado incluye contenido, padding y borde. Ninguno de los modos de tamaño incluye el margen en el ancho. Los elementos div ordinarios usan inicialmente content-box, pero el CSS de reset de un sitio puede cambiar esto; inspeccione el valor calculado.

Reemplace la regla .content-box del ejemplo por la siguiente. El ancho border-box de Alpha cambia de 240px a 200px. Mantenga los otros valores sin cambios, compare y restaure content-box. Si el padding y el borde juntos exceden el ancho especificado, el ancho del contenido no puede volverse negativo, por lo que la caja resultante aún puede ser más ancha de lo esperado.

.content-box {
  box-sizing: border-box;
}

MDN explicación de box-sizing

Centrar un bloque con márgenes automáticos

Para centrar horizontalmente un bloque en el flujo normal, la caja debe ser más estrecha que el ancho disponible en su contenedor y sus márgenes izquierdo y derecho deben ser automáticos. Delta tiene un ancho de 200px y margin: 0 auto, por lo que el espacio horizontal restante se comparte entre ambos lados. Centrar por sí solo no puede resolver el desbordamiento cuando el contenedor es demasiado estrecho.

Si un bloque ordinario con ancho automático ya ocupa todo el espacio horizontal disponible, agregar márgenes laterales automáticos no produce ningún efecto visible de centrado. En el flujo normal, margin-top: auto y margin-bottom: auto no lo centran verticalmente. Los márgenes automáticos en Flexbox o Grid siguen reglas de disposición diferentes, por lo que se deben distinguir esos contextos.

Comprender los márgenes colapsados y negativos

Los márgenes verticales contiguos elegibles pueden colapsar en un diseño de bloque ordinario. En el último ejemplo, el margen inferior de 24px de A y el margen superior de 16px de B son ambos positivos, por lo que su espacio es el valor mayor, 24px, en lugar de 40px. El borde del contenedor evita el colapso de márgenes entre ese contenedor y sus hijos en este ejemplo.

Cambie la regla .collapse-demo del ejemplo como se indica a continuación. Sus hijos se convierten en elementos flex, cuyos márgenes no colapsan entre sí, por lo que el espacio se convierte en 24 + 16 = 40px. Compare y restaure display: flow-root. Aplicar flow-root a un contenedor por sí solo no elimina todo el colapso de márgenes entre bloques hermanos.

.collapse-demo {
  display: flex;
  flex-direction: column;
  border: 1px dashed #777;
}

En el modo de escritura horizontal de este ejemplo, los márgenes izquierdo y derecho no colapsan de esta manera. Cuando los márgenes que colapsan incluyen valores positivos y negativos, sume el valor positivo más grande al valor negativo de mayor magnitud absoluta: 24px y -8px producen 16px. Si todos son negativos, use el valor más negativo; -8px y -16px producen -16px. Una declaración como margin-left: -8px es válida pero puede causar superposición o mover contenido fuera de su elemento contenedor. Revise pantallas estrechas e indicadores de enfoque de teclado. El relleno negativo no puede producir el mismo efecto. Reglas de colapso de márgenes de W3C

Comprobar un espaciado inesperado

1. Compruebe los valores predeterminados del navegador. El margen predeterminado del elemento body o los márgenes verticales predeterminados de p y h1 pueden hacer que el espaciado parezca mayor que sus declaraciones. Restablezca los elementos relevantes en lugar de eliminar ciegamente todo el espaciado.
2. Para un elemento en línea ordinario no reemplazado como span, los márgenes verticales no afectan la disposición de las líneas. El relleno en línea puede pintarse sin separar las líneas adyacentes como se espera. Considere usar inline-block u otro modo de disposición cuando la caja necesite tamaño y espaciado independientes.
3. Use las herramientas de desarrollo para verificar que el selector coincida, que la declaración sea válida y que una regla de mayor prioridad o una notación abreviada posterior no la haya anulado. Compare también en un ancho estrecho, comprobando el desbordamiento y el efecto del relleno en el ancho.

Para definir el espaciado en relación con la dirección de escritura, use propiedades lógicas como padding-inline y margin-block. En la escritura horizontal habitual, el eje en línea es horizontal y el eje de bloque es vertical. Estos ejes cambian en la escritura vertical, por lo que no siempre corresponden a izquierda y derecha físicas.