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 <div> en el siguiente ejemplo para mostrar el efecto de diferentes tipos de valores para la propiedad margin-left:

<div class="parent">
  <div class="margin-em">margin-left: 1em;</div>
  <div class="margin-px">margin-left: 10px;</div>
  <div class="margin-percent">margin-left: 10%;</div>
</div>

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 <length>, un porcentaje <percentage> 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.

<length>

Determine el valor del margen en longitudes absolutas.

<percentage>

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: <length> | <percentage> | 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.