CSS Margin
Usa la propiedad CSS margin para crear espacio alrededor del contenido de un elemento HTML fuera de sus bordes. Las propiedades son top, bottom, left y right.
La propiedad CSS margin crea espacio alrededor de un elemento — fuera de su borde. A diferencia de padding, que añade espacio dentro del borde (entre el contenido y el borde), el margin aleja a los elementos vecinos. El margin siempre es transparente: nunca muestra un color de fondo, solo agrega espacio vacío.
Este capítulo cubre las cuatro propiedades de lado individuales, el shorthand margin (de uno a cuatro valores), los valores especiales auto e inherit, cómo se calculan los márgenes en porcentaje, los márgenes negativos y la regla de colapso de márgenes que sorprende a casi todos la primera vez que la encuentran.
Los lados individuales
Con la ayuda de las siguientes propiedades puedes establecer el margin para cada lado de un elemento:
Es evidente que para la parte superior se usa margin-top, para la inferior margin-bottom, para el lado izquierdo margin-left y para el derecho margin-right.
Todas las propiedades de margin aceptan los siguientes valores:
auto- el margin es calculado por el navegador (se usa para centrar elementos de bloque horizontalmente),length- especifica un margin enpx,pt,cm,rem,em, etc.,%- especifica un margin como porcentaje del ancho del elemento contenedor,inherit- especifica que el margin debe heredarse del elemento padre.
Un detalle sutil pero importante: los márgenes en porcentaje son siempre relativos al ancho del bloque contenedor, incluso para margin-top y margin-bottom. Por tanto, margin-top: 10% dentro de un contenedor de 600px de ancho es 60px, no el 10% de la altura.
El margin también puede tomar valores negativos, que acercan (o superponen) un elemento a sus vecinos. Consulta Márgenes negativos a continuación.
Margin como propiedad shorthand
La propiedad CSS margin es una propiedad shorthand para las propiedades de margin individuales:
Cuando la propiedad margin tiene cuatro valores diferentes, el código se escribe así:
CSS con márgenes diferentes
p {
margin-top: 25px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 20px;
}Si todos los lados tienen el mismo valor, por ejemplo 50px en todos los lados, en CSS se puede escribir así:
CSS con el mismo margin, código
p {
margin: 50px;
}Cuando los lados superior e inferior tienen el mismo valor (por ejemplo, 15px) y los lados izquierdo y derecho tienen el mismo valor (por ejemplo, 10px), puedes usar el siguiente código:
CSS margin con 2 números, código
p {
margin: 15px 10px;
}Esto equivale a:
CSS margin con 2 números, forma larga, código
p {
margin-top: 15px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 10px;
}Cuando los lados izquierdo y derecho son iguales (por ejemplo, 15px), el lado superior es 5px y el inferior es 10px, puedes escribir:
CSS margin con 3 números, código
p {
margin: 5px 15px 10px;
}Esto equivale a:
CSS margin con 3 números, forma larga, código
p {
margin-top: 5px;
margin-right: 15px;
margin-bottom: 10px;
margin-left: 15px;
}Ejemplo de la propiedad margin:
Código de la propiedad CSS margin
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: white;
margin: 25px 10px 15px 20px;
}
</style>
</head>
<body>
<p>Paragraph with background-color, color and margin properties.</p>
</body>
</html>Resultado
El valor auto de la propiedad margin
Puedes centrar horizontalmente un elemento dentro de su contenedor estableciendo la propiedad margin en auto. Como resultado, el elemento ocupará su ancho definido y el espacio restante se dividirá a partes iguales entre los márgenes derecho e izquierdo.
Ejemplo de la propiedad margin con el valor "auto":
Ejemplo del uso del valor "auto" de la propiedad margin:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 300px;
margin: auto;
background-color: red;
}
</style>
</head>
<body>
<h2>The auto value</h2>
<p>
Setting the “auto” value of the margin property you can horizontally center the element inside its container. As a result, the element will take up the defined width and the space that remains, will be divided between the right and left margins.
</p>
<div>
The auto value horizontally centered this div.
</div>
</body>
</html>El valor inherit de la propiedad margin
En el ejemplo siguiente, el margin izquierdo del elemento <p> se hereda de su elemento padre (<div>):
Ejemplo de la propiedad margin con el valor "inherit":
Ejemplo del uso del valor "inherit" de la propiedad margin
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: lightblue;
margin-left: 100px;
}
p.inherit {
margin-left: inherit;
padding: 10px 0;
}
</style>
</head>
<body>
<h2>The inherit value</h2>
<p>
Here the left margin is inherited from its parent element:
</p>
<div>
<p class="inherit">
With the help of the "inherit" value, the left margin is inherited from the div element.
</p>
</div>
</body>
</html>Colapso de márgenes
Cuando dos márgenes verticales se encuentran, no se suman — se colapsan en un único margin igual al mayor de los dos. Esta es la sorpresa más común con los márgenes: si un párrafo tiene margin-bottom: 30px y el siguiente tiene margin-top: 20px, el espacio entre ellos es 30px, no 50px.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.top { margin-bottom: 30px; background: #1c87c9; color: #fff; }
.bottom { margin-top: 20px; background: #2eae44; color: #fff; }
</style>
</head>
<body>
<p class="top">My bottom margin is 30px.</p>
<p class="bottom">My top margin is 20px. The gap between us is 30px, not 50px.</p>
</body>
</html>Algunas reglas que conviene recordar:
- Solo se colapsan los márgenes superior e inferior. Los márgenes izquierdo y derecho (horizontales) nunca se colapsan — siempre se suman.
- Un padre y su primer/último hijo pueden colapsar juntos a menos que algo los separe (un borde, padding,
overflowdistinto devisible, o un contenedor flex/grid). - Los elementos vacíos colapsan sus propios márgenes superior e inferior en uno solo.
Si necesitas un espacio garantizado, prefiere padding, un borde, o usa un layout flex/grid con gap — los márgenes dentro de contenedores flex y grid no se colapsan.
Márgenes negativos
Un margin negativo acerca un elemento en la dirección del margin, solapándose frecuentemente con un vecino. Un margin-top o margin-left negativo desplaza el propio elemento; un margin-right o margin-bottom negativo acerca el contenido siguiente.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
background-color: #1c87c9;
color: #fff;
padding: 10px;
}
.pulled {
margin-top: -15px;
}
</style>
</head>
<body>
<div class="box">First box</div>
<div class="box pulled">This box is pulled 15px up to overlap the first one.</div>
</body>
</html>Los márgenes negativos son útiles para superponer tarjetas, sacar un elemento del padding de su contenedor o ajustar la alineación — pero úsalos con moderación, ya que pueden crear solapamientos difíciles de depurar.
Propiedades lógicas de margin
El CSS moderno también ofrece propiedades lógicas que siguen la dirección de escritura del texto en lugar de los lados físicos de la pantalla — útiles para sitios que admiten idiomas de izquierda a derecha y de derecha a izquierda:
margin-inline-start/margin-inline-end— el inicio/fin del eje en línea (texto),margin-block-start/margin-block-end— el inicio/fin del eje de bloque,- Los shorthands
margin-inlineymargin-block(p. ej.,margin-inline: autopara centrar horizontalmente tanto en LTR como en RTL).
En una página estándar de izquierda a derecha, margin-inline-start se comporta como margin-left y margin-block-start como margin-top, pero se invierten automáticamente para el contenido de derecha a izquierda.
Capítulos relacionados
- CSS Padding — espacio dentro del borde.
- CSS box-sizing — cómo se suman el ancho, el padding y el borde.
- margin-top, margin-right, margin-bottom, margin-left — las propiedades de lado individuales.