Propiedad margin-right

DefiniciónEstablece la anchura del margen derecho de los elementos
Valores
permitidos
Uno y sólo uno de los siguientes valores:
Si se utilizan porcentajes, hace referencia a la anchura del elemento en el que se encuentra
Valor inicial0
Se aplica aTodos los elementos
Válida enmedios visuales
Se heredano
Definición en
el estándar
w3.org/TR/CSS21/box.html#propdef-margin-right

Ejemplos de uso

Para cualquier elemento de la página, la propiedad margin-right establece la anchura de su margen derecho, como se muestra en el siguiente ejemplo:

div { margin-right: 50px; }

Como las zonas de los márgenes son transparentes y muestran el color de fondo que tenga establecido su elemento contenedor, en el ejemplo anterior no se puede ver claramente el margen derecho a menos que se muestre otro elemento a su derecha.

También es posible utilizar valores negativos en el margen derecho. En el siguiente ejemplo, el <div> interior tiene un margen derecho de -20px, lo que en la práctica implica que "se sale" por la parte derecha de su elemento contenedor:

div { margin-right: -20px; }

Si se utilizan porcentajes, su referencia es la anchura del elemento contenedor. Si no se ha establecido de forma explícita una anchura, se sustituye por el valor auto.

Al contrario de lo que sucede con los márgenes verticales, los márgenes laterales no se fusionan de forma automática. En el siguiente ejemplo, el primer <div> define un margen derecho de 40px, mientras que el segundo <div> define un margen izquierdo de 20px. El navegador muestra un margen lateral de 60px entre los dos elementos:

div { margin-right: 40px; }
div { margin-left: 20px; }