Docs ejecutables de CSS: Margin en CSS

Qué es el margin

El margin es el espacio fuera del borde de un elemento. Siempre es transparente, y su trabajo es alejar a los demás elementos. En el ejemplo, el contenedor gris se ve a través del margin alrededor de la caja azul:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Margin</title>
  <style>
    .container {
      display: flow-root; /* keeps the child's margin inside the gray area */
      background: #e5e7eb;
    }
    .box {
      margin: 24px;
      padding: 12px;
      border: 3px solid #111827;
      background: #2563eb;
      color: white;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">24px of margin on every side (the gray)</div>
  </div>
</body>
</html>

La franja gris no es parte de la caja: el fondo de la caja termina en su borde. Para un espacio que tome el fondo del elemento, usa padding.

La abreviatura margin

margin acepta de uno a cuatro valores, en el mismo orden de las agujas del reloj que padding:

Declaración	Arriba	Derecha	Abajo	Izquierda
`margin: 10px;`	10	10	10	10
`margin: 10px 20px;`	10	20	10	20
`margin: 10px 20px 30px;`	10	20	30	20
`margin: 10px 20px 30px 40px;`	10	20	30	40

Cada lado también tiene su propia propiedad (margin-top, margin-right, margin-bottom, margin-left) y versiones lógicas que siguen la dirección del texto (margin-inline-start, margin-inline-end, margin-block, margin-inline).

A diferencia de padding, margin acepta auto y valores negativos:

Valor	Ejemplo	Notas
Longitud	`16px`, `1.5rem`	Lo más común
Porcentaje	`5%`	Del ancho del bloque contenedor, en los cuatro lados
`auto`	`margin: 0 auto`	El navegador completa con el espacio sobrante
Negativo	`margin-top: -10px`	Acerca el elemento o a su vecino, puede superponerse

Centrar con margin: 0 auto

margin: 0 auto es la forma clásica de centrar un bloque en horizontal. auto en ambos lados le dice al navegador que reparta a partes iguales el espacio sobrante. Necesita un ancho menor que el contenedor, o no queda nada que repartir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>margin auto</title>
  <style>
    .page {
      max-width: 300px;
      margin: 0 auto;
      background: #2563eb;
      color: white;
      padding: 12px;
    }
    .end {
      width: 160px;
      margin-left: auto; /* all the leftover space goes on the left */
      background: #16a34a;
      color: white;
      padding: 8px;
      margin-top: 12px;
    }
  </style>
</head>
<body>
  <div class="page">Centered with margin: 0 auto</div>
  <div class="end">Pushed to the end</div>
</body>
</html>

Los márgenes auto no centran en vertical en el flujo normal (los márgenes auto verticales valen 0) y no hacen nada en elementos inline. Para ver todas las formas de centrar, consulta cómo centrar un div.

Colapso de márgenes

Cuando dos márgenes verticales se tocan, no se suman. El navegador se queda solo con el mayor. Aquí la primera caja tiene margin-bottom: 30px y la segunda margin-top: 20px, y el espacio entre ellas es de 30px, no de 50px:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Margin collapsing</title>
  <style>
    .box { background: #2563eb; color: white; padding: 10px; }
    .a { margin-bottom: 30px; }
    .b { margin-top: 20px; }
  </style>
</head>
<body>
  <div class="box a">margin-bottom: 30px</div>
  <div class="box b">margin-top: 20px</div>
  <p id="gap"></p>
  <script>
    const a = document.querySelector('.a').getBoundingClientRect();
    const b = document.querySelector('.b').getBoundingClientRect();
    document.getElementById('gap').textContent = 'Gap: ' + (b.top - a.bottom) + 'px';
  </script>
</body>
</html>

El colapso es intencional: permite que párrafos y títulos lleven cada uno su propio espaciado sin duplicarlo donde se encuentran. Sorprende en un segundo caso, cuando el margen superior de un hijo se escapa de su padre:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Parent collapse</title>
  <style>
    .parent { background: #e5e7eb; margin-bottom: 16px; }
    .child { margin-top: 30px; background: #f59e0b; padding: 8px; }
    .fixed { display: flow-root; }
  </style>
</head>
<body>
  <div class="parent"><div class="child">Margin escaped: no gray above me</div></div>
  <div class="parent fixed"><div class="child">flow-root: 30px of gray above me</div></div>
</body>
</html>

En el primer padre, el margen de 30px del hijo colapsó a través del borde superior del padre, así que empuja todo el padre hacia abajo en lugar de crear espacio gris dentro de él. Cualquiera de estas opciones lo evita:

display: flow-root en el padre (a diferencia de overflow: hidden, no recorta nada).
Padding o un borde en el lado superior del padre.
Un padre flex o grid: los márgenes de los elementos flex y grid nunca colapsan.

Los márgenes horizontales nunca colapsan, y tampoco los de elementos flotantes o con posición absoluta.

Márgenes negativos

Un margin negativo tira en la dirección contraria. En el lado superior o de inicio mueve el propio elemento; en el lado inferior o final acerca el siguiente elemento. Las cajas pueden superponerse:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Negative margin</title>
  <style>
    .card { background: #e5e7eb; padding: 16px; width: 240px; }
    .avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: #2563eb;
      border: 4px solid white;
      margin-top: -46px; /* pulled up over the banner */
    }
    .banner { height: 60px; background: #16a34a; width: 272px; }
  </style>
</head>
<body>
  <div class="banner"></div>
  <div class="card">
    <div class="avatar"></div>
    <p>The avatar overlaps the banner.</p>
  </div>
</body>
</html>

margin auto en flexbox

Dentro de un contenedor flex, un margin auto toma todo el espacio libre de su lado. Es la forma más simple de empujar un elemento al otro extremo de una fila, y en flexbox auto también funciona en vertical:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Flex margin auto</title>
  <style>
    nav { display: flex; gap: 12px; background: #111827; padding: 10px; }
    nav a { color: white; text-decoration: none; }
    .login { margin-inline-start: auto; color: #f59e0b; }
  </style>
</head>
<body>
  <nav>
    <a href="#">Home</a>
    <a href="#">Docs</a>
    <a href="#">Blog</a>
    <a href="#" class="login">Log in</a>
  </nav>
</body>
</html>

margin-inline-start: auto pone el espacio libre antes de "Log in", al final de la fila tanto en páginas de izquierda a derecha como de derecha a izquierda.

Errores comunes

margin: 0 auto en un elemento sin ancho. Un bloque ya ocupa todo su contenedor; define un width o un max-width.
margin: auto en un elemento inline. Los márgenes auto en un span, un a o un img que siguen siendo inline valen 0. Hazlo display: block.
Poner dos márgenes verticales y esperar la suma. Colapsan al mayor; usa gap en flex o grid, o una sola dirección de margin de forma consistente.
El margin de un hijo empuja a su padre. Es el colapso entre padre e hijo; agrega display: flow-root al padre.
Usar margin para un espacio que debería tener fondo. El margin es transparente; usa padding.

Preguntas frecuentes

¿Qué es el margin en CSS?

El margin es el espacio fuera del borde de un elemento. Es transparente y aleja a los elementos vecinos. Se define con margin o con las propiedades de cada lado margin-top, margin-right, margin-bottom y margin-left.

¿Qué hace margin: 0 auto?

Pone los márgenes de arriba y abajo en 0 y reparte a partes iguales el espacio horizontal sobrante entre los márgenes izquierdo y derecho, lo que centra horizontalmente un elemento de bloque. El elemento necesita un ancho menor que su contenedor, por ejemplo max-width: 600px.

¿Por qué margin auto no centra mi elemento?

Normalmente porque el elemento no tiene ancho (un bloque ocupa todo su contenedor, así que no queda nada que repartir) o porque es inline (span, a, img por defecto), donde los márgenes auto valen 0. Dale un ancho y display: block, o céntralo desde el padre con flexbox o grid.

¿Qué es el colapso de márgenes?

Cuando dos márgenes verticales se encuentran, por ejemplo el margen inferior de un párrafo y el superior del siguiente, el navegador usa solo el mayor en vez de sumarlos. Solo les pasa a los márgenes verticales de cajas de bloque en el flujo normal, no en layouts flex ni grid.

¿El margin puede ser negativo?

Sí. Un margin negativo acerca el elemento hacia ese lado, o acerca el siguiente elemento sobre él, así que las cajas pueden superponerse. Sirve para pequeños ajustes de alineación y para que un elemento salga del padding de su contenedor.

Conceptos relacionados