Propiedad CSS margin-right
Usa esta propiedad para establecer el espacio de margen en el lado derecho de un elemento. Consulta valores y ejemplos.
La propiedad CSS margin-right establece el ancho del área de margen en el lado derecho de un elemento — el espacio transparente entre el borde derecho del elemento y el contenido adyacente o su bloque contenedor.
Es una de las cuatro propiedades de margen individuales — junto con margin-top, margin-bottom y margin-left — que el atajo margin establece todas a la vez. Usa margin-right cuando solo quieras ajustar el espacio en la derecha, por ejemplo para separar un icono en línea del texto que lo sigue, o para alejar un elemento flotante del contenido que tiene al lado.
Esta página cubre la sintaxis de la propiedad, cada valor aceptado (incluidos auto, % y longitudes negativas), y las reglas que debes conocer antes de usarla.
Se permiten valores negativos. Un margin-right negativo acerca el contenido siguiente (o lo superpone), lo que a veces es útil para efectos de superposición, pero puede causar sorpresas en el diseño.
| Valor inicial | 0 |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter. |
| Heredado | No. |
| Animable | Sí. El margen derecho del elemento es animable. |
| Versión | CSS2 |
| Sintaxis DOM | object.style.marginRight = "50px"; |
Sintaxis
margin-right: length | auto | initial | inherit;Ejemplos
Una longitud fija en píxeles
El caso más sencillo: reservar una cantidad fija de espacio a la derecha. Aquí el párrafo mantiene un espacio de 400px en su lado derecho, por lo que ya no se extiende hasta el ancho completo del contenedor.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.right {
margin-right: 400px;
}
</style>
</head>
<body>
<h2>Margin-right property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="right">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Resultado
Un valor en porcentaje
Cuando el valor es un porcentaje, se calcula en relación con el ancho del bloque contenedor — no con el ancho propio del elemento. Por lo tanto, margin-right: 50% deja un espacio igual a la mitad del ancho del contenido del padre.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.right {
margin-right: 50%;
}
</style>
</head>
<body>
<h2>Margin-right property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="right">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>El valor auto
Para un elemento de nivel de bloque, margin-right: auto permite al navegador llenar el espacio disponible a la derecha. Por sí solo tiene poco efecto visible, pero combinado con margin-left: auto es el truco clásico para centrar horizontalmente un bloque de ancho fijo. Establecer solo margin-right: auto (con margin-left: 0) empuja un bloque hacia el borde izquierdo.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.right {
margin-right: auto;
}
</style>
</head>
<body>
<h2>Margin-right property example</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<p class="right">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</body>
</html>Valores
| Valor | Descripción | Pruébalo |
|---|---|---|
| auto | Establece el margen derecho. Es el valor predeterminado de esta propiedad. | Pruébalo » |
| length | Define un margen derecho en px, pt, cm, etc. El valor predeterminado es 0. | Pruébalo » |
| % | Establece el margen derecho 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. |
Aspectos a tener en cuenta
- Los márgenes son transparentes. A diferencia del relleno (padding), el margen se sitúa fuera del borde y nunca muestra el color de fondo del elemento.
- Los márgenes derechos no colapsan. El colapso de márgenes solo ocurre entre márgenes verticales adyacentes (
margin-top/margin-bottom). Los márgenes horizontales comomargin-rightsiempre se suman. - Los porcentajes hacen referencia al ancho. Un valor en
%se resuelve respecto al ancho del bloque contenedor, aunque controle el espacio horizontal. - Alternativa con el atajo. Si estableces más de un lado a la vez, el atajo
margines más corto:margin: 0 400px 0 0es equivalente amargin-right: 400pxmás ceros en los demás lados.