Características margin-right en CSS

La propiedad margin-right en CSS establece el margen en el extremo derecho del elemento, los valores positivos acercarán el elemento a él y los valores negativos lo acercarán.

Funciones margin-right css

Valor inicial	`0`
Aplicado a	Todos los elementos, excepto los elementos de la tabla en los que el valor de la propiedad no es igual a `display` una de las palabras reservadas `table-caption`, `table` y `inline-table`.
Heredable	No
Móvil	Sí
Valor calculado	Un porcentaje o longitud absoluta.

/*  longitudes */ 
margin-right :  10px;   /* longitud absoluta */ 
margin-right :  1em ;   /* longitud relativa del tamaño de fuente */ 
margin-right :  5%;     /* Longitud relativa para mostrar el contenedor de bloques más cercano */
/* palabras reservadas */ 
margin-right :  auto;
/* valores globales */ 
margin-right: inherit;
margin-right: initial;
margin-right: unset;

Ejemplos y aplicaciones en código

Usaremos el elemento

en el siguiente ejemplo para mostrar el efecto de diferentes tipos de valores para la propiedad margin-right:


   margin-right: 1em; 
   margin-right: 10px; 
   margin-right: 10%;

Código CSS:

.parent {
  border: 1px solid #eaecf0;
  background-color: #f8f9fa;
  margin: 1em;
}
.parent > div {
  padding: 0.25em;
  background-color: #069;
  color: white;
}
.margin-em      { margin-right: 1em; }
.margin-px      { margin-right: 10px; }
.margin-percent { margin-right: 10%; }

Soporte de navegadores

Característica	Chrome	Firefox	IE	Ópera	Safari
Soporte básico	1.0	1.0	3,0	3,5	1.0

Características generales

La propiedad acepta margin-right un valor único que puede ser una longitud , un porcentaje o una palabra reservada auto, y cada valor puede ser positivo, negativo o cero.

auto

El margin derecho tendrá una parte del espacio horizontal no utilizado que está determinado principalmente por el diseño utilizado. Y si las dos propiedades son margin-left y margin-right son iguales auto, entonces la distancia calculada se distribuye por igual. Esta tabla muestra los diferentes casos:

Visualización	Valor	Posición	Valor automático
`inline`, `inline-block` o `inline-table`	algún valor	`static` o `relative`	`0`
`inline`, `inline-block`, `block`, `table`, `inline-table`, `list-item` o `table-caption`.	algún valor	`static` o `relative`	0, excepto si `margin-left` y `margin-right` es igual `auto`, en cuyo caso el elemento estará centrado dentro del elemento padre.
`inline`, `inline-block`, `block`, `table`, `inline-table`, `list-item` o `table-caption`.	`left` o `right`	`static` o `relative`	`0`
Cualquier valor `table-*‎` excepto `table-caption`.	algún valor	algún valor	`0`
Cualquier valor excepto flex, inline-flex y table- *.	algún valor	`fixed` o `absolute`	0, excepto si `margin-left` y `margin-right` es igual `auto`, en cuyo caso el elemento estará centrado dentro del elemento padre.
`flex` y `inline-flex`.	algún valor	algún valor	0, excepto si `margin-left` y `margin-right` es igual `auto`, en cuyo caso el elemento estará centrado dentro del elemento padre.

Determine el valor del margen en longitudes absolutas.

Especifica el valor del margen como un porcentaje del ancho del elemento de bloque que contiene el elemento actual.

Estructura margin-right css

margin-right:  |  | auto;

Consulte también

La página margin y la página subpropiedades que este conjunto de propiedades son: margin-top, margin-bottom y margin-left.
En la página de propiedades padding establece la anotación en los cuatro extremos del elemento.
La página de propiedades position que describe cómo se debe colocar el elemento en el documento.