Propiedad CSS margin-bottom

La propiedad CSS margin-bottom define el espacio por debajo de un elemento, entre su borde inferior y el siguiente elemento en el flujo. El margen es transparente: empuja el contenido vecino hacia afuera pero nunca tiene fondo ni borde propio. Esta página cubre la sintaxis, las unidades aceptadas, la regla importante (aunque sorprendente) del colapso de márgenes y cómo margin-bottom se relaciona con las demás propiedades de margen.

Usa margin-bottom cuando quieras espacio vertical después de un elemento — por ejemplo, para separar párrafos apilados, para dejar espacio entre un encabezado y el texto que le sigue, o para crear un hueco bajo una tarjeta.

Información

Los valores negativos son válidos (por ejemplo, margin-bottom: -10px;) y desplazan el elemento siguiente hacia arriba, permitiendo que se superponga.

Información

margin-bottom no tiene efecto en elementos en línea no reemplazados como <span> o <a>. Para aplicarles margen vertical, establece primero display: inline-block o display: block.

margin-bottom es uno de los cuatro lados controlados por la propiedad abreviada margin; su contraparte vertical es margin-top.

Valor inicial	0
Se aplica a	Todos los elementos. También se aplica a ::first-letter.
Heredado	No.
Animable	Sí. El margen inferior del elemento es animable.
Versión	CSS2
Sintaxis DOM	object.style.marginBottom = "70px";

Sintaxis

Sintaxis de la propiedad CSS margin-bottom

margin-bottom: length | percentage | auto | initial | inherit;

El valor se puede expresar de varias formas:

length — un tamaño fijo en px, em, rem, pt, cm, etc. em es relativo al tamaño de fuente del propio elemento; rem, al tamaño de fuente raíz.
percentage — una fracción del ancho del bloque contenedor (no de su altura), por lo que un margen inferior en % escala según el ancho del padre.
auto — el navegador calcula el valor; para margin-bottom casi siempre resuelve a 0.
initial / inherit — restablece el valor predeterminado (0) o copia el valor del padre.

Ejemplo de la propiedad margin-bottom:

Ejemplo de la propiedad CSS margin-bottom con valor en px

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .bottom {
        margin-bottom: 100px;
      }
    </style>
  </head>
  <body>
    <h2>Margin-bottom property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="bottom">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Ejemplo de la propiedad margin-bottom definida como "4em":

Ejemplo de la propiedad CSS margin-bottom con valor en em

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .bottom {
        margin-bottom: 4em;
      }
    </style>
  </head>
  <body>
    <h2>Margin-bottom property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="bottom">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo de la propiedad margin-bottom especificada en "px", "em" y "%":

Ejemplo de la propiedad CSS margin-bottom con valores en px, em y %

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.p1 {
        margin-bottom: 5em;
      }
      p.p2 {
        margin-bottom: 20%;
      }
      p.p3 {
        margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Margin-bottom property example</h2>
    <p>A paragraph with no margins specified.</p>
    <p class="p1">Bottom margin is set to 5em.</p>
    <p class="p2">Bottom margin is set to 20%.</p>
    <p class="p3">Bottom margin is set to 20px.</p>
    <p>A paragraph with no margins specified.</p>
  </body>
</html>

Pruébalo tú mismo »

Colapso de márgenes

Un comportamiento que suele sorprender: cuando el margin-bottom de un bloque se encuentra con el margin-top del siguiente, los dos no se suman. En cambio, colapsan en un único margen igual al mayor de los dos. El colapso solo se aplica a los márgenes verticales (superior e inferior) de las cajas de nivel de bloque; los márgenes horizontales nunca colapsan.

Colapso de márgenes

p.one {
  margin: 20px 0;
}

p.two {
  margin: 35px 0;
}

En el código anterior, <p class="one"> tiene un margen vertical de 20px y <p class="two"> tiene un margen vertical de 35px. Podrías esperar que la separación entre ellos fuera 20 + 35 = 55px. Debido al colapso de márgenes, la separación real es 35px — el mayor de los dos.

Para evitar que dos márgenes colapsen, sepáralos con algo: agrega un borde o padding al padre, o coloca los elementos en diferentes contextos de formato (por ejemplo, estableciendo display: flex o display: grid en el contenedor, donde los márgenes nunca colapsan).

Ejemplo de colapso de márgenes:

Ejemplo del colapso de márgenes

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.one {
        margin: 20px 0;
      }
      p.two {
        margin: 35px 0;
      }
    </style>
  </head>
  <body>
    <h2>Margin-bottom property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="one">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="two">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>

Pruébalo tú mismo »

Valores

Valor	Descripción	Pruébalo
auto	Establece el margen inferior. Es el valor predeterminado de esta propiedad.	Pruébalo »
length	Define un margen inferior en px, pt, cm, etc. El valor predeterminado es 0.	Pruébalo »
%	Establece el margen inferior en % del elemento contenedor.	Pruébalo »
initial	Hace que la propiedad use su valor predeterminado.	Pruébalo »
inherit	Hereda la propiedad de su elemento padre.

Propiedades relacionadas

margin-top — la contraparte vertical que establece el espacio encima de un elemento (y colapsa con margin-bottom).
margin — la propiedad abreviada que establece los cuatro lados a la vez.
padding-bottom — espacio dentro del borde inferior del elemento, dentro de su borde.
box-sizing — controla cómo se miden el ancho y el alto; contexto útil al razonar sobre el modelo de caja.

Práctica

¿Cuál es la función de la propiedad 'margin-bottom' en CSS?

Establece los márgenes superiores de un elemento.Establece los márgenes inferiores de un elemento.Establece el tamaño de fuente de un elemento.Establece el color del borde de un elemento.Crea un espacio debajo de un elemento para separarlo de otros.