
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
ymargin-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.
- ¿Qué es el código CSS y en que se utiliza?
- Característica background-attachment en CSS
- Característica background-blend-mode en CSS
- Característica background-clip en CSS
- Característica background-color en CSS
- Característica background-image en CSS
- Característica background-origin en CSS
- Característica background-position en CSS
- Característica background-repeat en CSS
- Característica background-size en CSS
- Característica border-bottom en CSS
- Característica border-bottom-color en CSS
- Característica border-bottom-style en CSS
- Característica border-bottom-width en CSS
- Característica border-color en CSS
- Característica border-image en CSS
- Característica border-image-outset en CSS
- Característica border-image-repeat en CSS
- Característica border-image-slice en CSS
- Característica border-image-source en CSS
- Característica border-left-color en CSS
- Característica border-left-style en CSS
- Característica border-left-width en CSS
- Característica border-right en CSS
- Característica Box Sizing en CSS
- Característica box-shadow en CSS
- Característica de Border en CSS
- Característica de Opacity en CSS
- Característica del Background en CSS
- Característica del Color en el CSS
- Característica del CSS Bottom
- Característica del CSS Display
- Característica del Margin en CSS
- Característica del Overflow en CSS
- Característica del Padding en CSS
- Características align-content en CSS
- Características align-items en CSS
- Características align-self en CSS
- Características border-bottom-left-radius en CSS
- Características border-bottom-right-radius en CSS
- Características border-image-width en CSS
- Características border-left en CSS