Propiedad CSS margin-right
La propiedad margin-right se utiliza para definir cuánto se establecerá el margen derecho del elemento.
INFO
Se permiten valores negativos.
| Valor inicial | 0 |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter. |
| Heredable | No. |
| Animable | Sí. El margen derecho del elemento es animable. |
| Versión | CSS2 |
| Sintaxis DOM | object.style.marginRight = "50px"; |
Sintaxis
Sintaxis de la propiedad CSS margin-right
css
margin-right: length | auto | initial | inherit;Ejemplo de la propiedad margin-right:
Ejemplo de la propiedad CSS margin-right con valor en px
html
<!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
Ejemplo de la propiedad margin-right especificada en "%":
Ejemplo de la propiedad CSS margin-right con valor en %
html
<!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>Ejemplo de la propiedad margin-right con el valor "auto":
Ejemplo de la propiedad margin-right con el valor "auto":
html
<!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 | Probarlo |
|---|---|---|
| auto | Establece el margen derecho. Es el valor predeterminado de esta propiedad. | Probarlo » |
| length | Define un margen derecho en px, pt, cm, etc. El valor predeterminado es 0. | Probarlo » |
| % | Establece el margen derecho en % del elemento contenedor. | Probarlo » |
| initial | Hace que la propiedad use su valor predeterminado. | Probarlo » |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Qué hace la propiedad CSS 'margin-right'?