Propiedad CSS margin — Sintaxis, valores y ejemplos

La propiedad CSS margin crea espacio fuera del borde de un elemento: la separación entre ese elemento y sus vecinos. A diferencia de padding, que añade espacio dentro del borde, margin empuja el resto del contenido alejándolo del elemento.

Esta página cubre la sintaxis abreviada, cómo funciona el patrón de uno a cuatro valores, el centrado con auto, los márgenes negativos y la regla de colapso de márgenes que sorprende a la mayoría de los principiantes.

Para qué es una abreviatura margin

La propiedad margin es una abreviatura que establece las cuatro propiedades individuales de cada lado en una sola declaración:

El patrón de uno a cuatro valores

Como margin es una abreviatura, el número de valores que se le proporcionan determina a qué lados se aplican. Los valores siempre van en sentido horario empezando desde arriba (arriba → derecha → abajo → izquierda):

Cuatro valores — margin: 25px 10px 15px 20px; establece arriba 25px, derecha 10px, abajo 15px, izquierda 20px.
Tres valores — margin: 15px 10px 20px; establece arriba 15px, derecha e izquierda 10px, abajo 20px.
Dos valores — margin: 15px 10px; establece arriba y abajo 15px, derecha e izquierda 10px.
Un valor — margin: 15px; aplica 15px a los cuatro lados.

Un truco mnemotécnico para la forma de cuatro valores es la palabra TRouBLe (Top, Right, Bottom, Left).

Información

Los valores negativos son válidos.

Información

Los márgenes superior e inferior no tienen efecto en los elementos en línea, como <span> o <code>.

Valor inicial	0
Se aplica a	Todos los elementos.
Heredado	No.
Animable	Sí. El margin es animable.
Versión	CSS1
Sintaxis DOM	Object.style.margin = "20px 10px";

Sintaxis

Sintaxis de la propiedad CSS margin

margin: length | auto | initial | inherit;

Ejemplo de la propiedad margin:

Ejemplo de la propiedad CSS margin con cuatro valores

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        background-color: #1c87c9;
        color: #fff;
        margin: 25px 10px 15px 20px;
      }
    </style>
  </head>
  <body>
    <h2>Margin property example</h2>
    <p>Paragraph with background-color, color and margin properties.</p>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Ejemplo de la propiedad margin donde el margen de un elemento se establece al 10% para todos los lados:

Ejemplo de la propiedad CSS margin con valor % (porcentaje)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.example {
        margin: 10%;
      }
    </style>
  </head>
  <body>
    <h2>Margin property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="example">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 definida como "em":

Ejemplo de la propiedad CSS margin con valor em

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

Veamos el siguiente ejemplo que muestra la diferencia entre las propiedades margin, padding y border:

Ejemplo de la propiedad margin junto con las propiedades padding y border:

Ejemplo de la propiedad CSS margin con un valor (px)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: #eee;
        width: 200px;
        border: 20px solid #8ebf42;
        padding: 30px;
        margin: 55px;
      }
    </style>
  </head>
  <body>
    <h2>Margin property example</h2>
    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  </body>
</html>

Pruébalo tú mismo »

Centrar un bloque con `margin: auto`

Establecer los márgenes izquierdo y derecho en auto es la forma clásica de centrar horizontalmente un elemento de bloque que tiene un ancho explícito. El navegador reparte el espacio horizontal sobrante de forma equitativa entre los dos lados:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        width: 300px;
        margin: 0 auto;
        background-color: #1c87c9;
        color: #fff;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div class="box">I am centered horizontally.</div>
  </body>
</html>

margin: 0 auto; significa márgenes superior e inferior de 0 y auto en izquierda y derecha. Ten en cuenta que auto solo centra horizontalmente — no centra verticalmente. Para el centrado vertical, usa Flexbox o Grid.

Márgenes negativos

Los márgenes aceptan valores negativos, que acercan un elemento hacia su vecino (o lo sacan más allá de su contenedor) en lugar de alejarlo. Esto es útil para superponer elementos o desplazar un elemento más allá del padding de su padre:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .second {
        margin-top: -20px;
        background-color: #8ebf42;
        color: #fff;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <p>First paragraph.</p>
    <p class="second">This paragraph is pulled up to overlap the one above.</p>
  </body>
</html>

Colapso de márgenes

Cuando los márgenes superior e inferior de dos elementos de bloque se encuentran verticalmente, no se suman, sino que colapsan en un único margen igual al mayor de los dos. Así, un párrafo con margin-bottom: 30px; seguido de otro con margin-top: 20px; produce una separación de 30px entre ellos, no de 50px.

Información

El colapso de márgenes solo afecta a los márgenes verticales (superior/inferior) de las cajas de bloque en el flujo normal. Los márgenes izquierdo y derecho nunca colapsan, y los márgenes de los elementos Flex o Grid tampoco colapsan.

Valores

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

Práctica

¿Cuáles de las siguientes afirmaciones son verdaderas sobre los márgenes CSS?

Los márgenes se utilizan para crear espacio alrededor de los elementos, fuera de cualquier borde definido.Los márgenes no tienen propiedades.Con CSS, tienes control total sobre los márgenes.Hay propiedades para establecer el margen de cada lado de un elemento (superior, derecho, inferior e izquierdo).Los márgenes siempre son transparentes.Puedes usar valores negativos para crear efectos de superposición.La propiedad margin-clear permite establecer el margen de un elemento.

Para qué es una abreviatura margin

El patrón de uno a cuatro valores

Sintaxis

Ejemplo de la propiedad margin:

Resultado

Ejemplo de la propiedad margin donde el margen de un elemento se establece al 10% para todos los lados:

Ejemplo de la propiedad margin definida como "em":

Ejemplo de la propiedad margin junto con las propiedades padding y border:

Centrar un bloque con margin: auto

Márgenes negativos

Colapso de márgenes

Valores

Práctica

Centrar un bloque con `margin: auto`