Características margin-left en CSS

La propiedad margin-left en CSS establece el margen en el extremo izquierdo del elemento, los valores positivos acercarán el elemento y los valores negativos lo acercarán.

Funciones margin-left 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.

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

En los casos raros en los que se ve limitada la anchura del elemento (es decir, todas las propiedades width, margin-left, border, padding y están margin-right definidos), la propiedad margin-left será obsoleto, y tendrá el mismo valor auto.

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-left:


  margin-left: 1em;
  margin-left: 10px;
  margin-left: 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-left: 1em; }
.margin-px      { margin-left: 10px; }
.margin-percent { margin-left: 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 general

La propiedad acepta margin-left 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 margen izquierdo tendrá una parte del espacio horizontal no utilizado que se determina principalmente a partir del 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`, `inline-table`	algún valor	`static` o `relative`	`0`
`inline`, `inline-block`, `block`, `table`, `inline-table`, `list-item`, `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`, `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 el valor `margin-left` y es `margin-right` igual a `auto`, en este caso, el elemento estará centrado dentro del elemento padre.
`flex` y `inline-flex`.	algún valor	algún valor	`0`, pero si el valor `margin-left` y es `margin-right` igual a `auto`, en este 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-left css

margin-left:  |  | 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-right.
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.