Docs ejecutables de CSS: Margin vs padding

Q: ¿El padding o el margin aumentan el tamaño del elemento?

El padding sí, con el box-sizing: content-box por defecto: se suma al ancho y al alto. El margin nunca se suma al tamaño del elemento; agrega espacio a su alrededor (un bloque con width: auto incluso se vuelve más angosto, porque sus márgenes toman parte del ancho disponible). Con box-sizing: border-box, el padding se toma de dentro del ancho.

La diferencia en una imagen

El padding está dentro del borde. El margin está fuera. Las dos cajas de abajo tienen el mismo contenido y el mismo valor de 24px; solo cambia la propiedad. Lo gris es el contenedor que está detrás.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Margin vs padding</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
    .container { display: flow-root; background: #e5e7eb; width: max-content; }
    .box {
      border: 3px solid #111827;
      background: #2563eb;
      color: white;
    }
    .with-padding { padding: 24px; }
    .with-margin { margin: 24px; }
    .label { font-size: 13px; margin: 6px 0 0; color: #111827; }
  </style>
</head>
<body>
  <div class="row">
    <div>
      <div class="container"><div class="box with-padding">Text</div></div>
      <p class="label">padding: 24px</p>
    </div>
    <div>
      <div class="container"><div class="box with-margin">Text</div></div>
      <p class="label">margin: 24px</p>
    </div>
  </div>
</body>
</html>

Con padding, los 24px son azules: forman parte de la caja, dentro del borde, y la caja crece. Con margin, los 24px son grises: la caja queda ajustada a su texto y el espacio de afuera aleja los bordes del contenedor.

Prueba los dos en una caja

Mueve los dos controles deslizantes. El padding agranda la caja azul; el margin aleja la caja de los bordes grises sin cambiarla.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sliders</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 6px; }
    .container { display: flow-root; background: #e5e7eb; width: max-content; margin-top: 10px; }
    #box { border: 3px solid #111827; background: #2563eb; color: white; }
  </style>
</head>
<body>
  <label>padding <input id="p" type="range" min="0" max="40" value="10"> <span id="pv"></span></label>
  <label>margin <input id="m" type="range" min="0" max="40" value="10"> <span id="mv"></span></label>
  <div class="container"><div id="box">Box</div></div>
  <p id="size"></p>
  <script>
    const box = document.getElementById('box');
    const p = document.getElementById('p');
    const m = document.getElementById('m');
    const update = () => {
      box.style.padding = p.value + 'px';
      box.style.margin = m.value + 'px';
      document.getElementById('pv').textContent = p.value + 'px';
      document.getElementById('mv').textContent = m.value + 'px';
      const r = box.getBoundingClientRect();
      document.getElementById('size').textContent =
        'Blue box: ' + Math.round(r.width) + ' x ' + Math.round(r.height) + 'px';
    };
    p.addEventListener('input', update);
    m.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Observa la línea del tamaño: cambia cuando mueves el control del padding y se queda igual cuando mueves el del margin.

Margin vs padding de un vistazo

	Padding	Margin
Dónde	Dentro del borde	Fuera del borde
Fondo	Muestra el fondo del elemento	Siempre transparente
Parte del área de clic	Sí	No
Se suma al tamaño del elemento	Sí, con `content-box`	No
Puede ser `auto`	No	Sí (`margin: 0 auto` centra)
Puede ser negativo	No	Sí
Los valores verticales colapsan	Nunca	Sí, los márgenes verticales adyacentes colapsan
Porcentajes relativos a	El ancho del bloque contenedor	El ancho del bloque contenedor
Uso típico	Espacio dentro de botones, tarjetas, inputs	Espacio entre elementos, centrado

Cada propiedad tiene su propia página con todos los detalles: padding en CSS y margin en CSS.

Cuál usar

Hazte una pregunta: ¿el espacio pertenece al elemento o está entre elementos?

El aire alrededor del texto de un botón, el interior de una tarjeta, el espacio entre el texto de un input y su borde: padding. Toma el fondo y agranda el objetivo.
El espacio entre dos párrafos, entre tarjetas, alrededor de una sección: margin, o gap cuando el padre es un contenedor flex o grid.

El área de clic es donde más importa la elección. Los dos enlaces de abajo ocupan el mismo espacio en la página, pero el espacio del primero es padding y el del segundo es margin. Solo el primero es fácil de tocar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Click area</title>
  <style>
    a {
      display: inline-block;
      background: #2563eb;
      color: white;
      text-decoration: none;
      outline: 2px dashed #f59e0b; /* the clickable area */
    }
    .pad { padding: 14px 24px; }
    .mar { margin: 14px 24px; }
  </style>
</head>
<body>
  <a class="pad" href="#">Padding: big target</a>
  <a class="mar" href="#">Margin: tiny target</a>
</body>
</html>

El contorno ámbar punteado es el borde del elemento, que es el área que responde a clics y toques. El margin alrededor del segundo enlace es espacio vacío que no hace nada.

Espacio entre elementos: margin o gap

Para una fila o una cuadrícula de elementos, gap en el padre flex o grid suele ser más limpio que poner márgenes en cada hijo: solo va entre los elementos, nunca antes del primero ni después del último, así que no hay nada que deshacer.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>gap</title>
  <style>
    .list { display: flex; gap: 12px; background: #e5e7eb; padding: 12px; }
    .item { background: #16a34a; color: white; padding: 12px 16px; }
  </style>
</head>
<body>
  <div class="list">
    <div class="item">One</div>
    <div class="item">Two</div>
    <div class="item">Three</div>
  </div>
</body>
</html>

Aquí el contenedor gris usa padding (espacio dentro de él, gris), los elementos usan padding (espacio dentro de cada uno, verde) y gap se encarga del espacio entre ellos.

Errores comunes

Usar margin para un espacio que debería tener color. El margin es transparente. Si el espacio debe mostrar el fondo, es padding.
Usar margin para agrandar un enlace. El área de clic termina en el borde; usa padding.
Esperar que dos márgenes verticales de 20px den 40px. Los márgenes verticales adyacentes colapsan a 20px. El padding nunca colapsa.
Probar padding: auto para centrar. Solo margin acepta auto.
Olvidar que el padding agranda la caja. Agrega box-sizing: border-box para que width lo incluya.

Preguntas frecuentes

¿Qué diferencia hay entre margin y padding?

El padding es el espacio entre el contenido de un elemento y su borde, dentro del elemento. El margin es el espacio fuera del borde, entre el elemento y sus vecinos. El padding muestra el fondo del elemento; el margin siempre es transparente.

¿Cuándo uso padding en lugar de margin?

Usa padding para el espacio que pertenece al elemento: el aire alrededor del texto de un botón, el interior de una tarjeta, todo lo que deba compartir el fondo o ser clicable. Usa margin (o gap en flex y grid) para el espacio entre elementos separados.

¿El padding o el margin aumentan el tamaño del elemento?

El padding sí, con el box-sizing: content-box por defecto: se suma al ancho y al alto. El margin nunca se suma al tamaño del elemento; agrega espacio a su alrededor (un bloque con width: auto incluso se vuelve más angosto, porque sus márgenes toman parte del ancho disponible). Con box-sizing: border-box, el padding se toma de dentro del ancho.

¿El padding puede ser negativo como el margin?

No. Un padding negativo es inválido y se ignora, mientras que los márgenes negativos están permitidos y pueden hacer que los elementos se superpongan. El padding tampoco puede ser auto, y por eso para centrar se usa margin: 0 auto.

Conceptos relacionados