This translation is incomplete. Please help translate this article from English.

La propietat CSS margin-left estableix l'àrea de marge en el costat esquerre d'un element. Un valor positiu el situarà més enllà del normal dels seus veïns, mentre que un valor negatiu el situarà més a prop.

/* <length> values */
margin-left: 10px;  /* An absolute length */
margin-left: 1em;   /* relative to the text size */
margin-left: 5%;    /* relative to the nearest block container's width */

/* Keyword values */
margin-left: auto;

/* Global values */
margin-left: inherit;
margin-left: initial;
margin-left: unset;

Area on which CSS margin-left apply

Els marges verticals de dues caixes adjacents es poden fusionar. Això es diu col.lapse de marge.

En els casos excepcionals en què l'amplada està massa restringida (és a dir, quan es defineixen tots els width, margin-left, border, padding, l'àrea de contingut i margin-right), s'ignora el margin-left i tindrà el mateix valor calculat que si s'especifica el valor auto.

Initial value0
Applies toall elements, except elements with table display types other than table-caption, table and inline-table. It also applies to ::first-letter.
Inheritedno
Percentagesrefer to the width of the containing block
Mediavisual
Computed valuethe percentage as specified or the absolute length
Animation typea length
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Sintaxi

La propietat margin-left és especificada amb la paraula clau auto, o un <length>, o un <percentage>. El seu valor pot ser positiu, zero o negatiu.

Valors

<length>
La grandària del marge com a valor fix.
<percentage>
La grandària del marge com a percentatge, en relació amb l'amplada del bloc contenidor.
auto
El marge esquerre rep una part de l'espai horitzontal no utilitzat, tal com es determina principalment pel mode de disseny que s'utilitza. Si els valors de margin-left i margin-right són auto, l'espai calculat es distribueix de manera uniforme. Aquesta taula resumeix els diferents casos:
Valor de display Valor de float Valor de position Valor calculat d'auto Comment
inline, inline-block, inline-table qualsevol static o relative 0 Mode de disseny en línia
block, inline, inline-block, block, table, inline-table, list-item, table-caption qualsevol static o relative 0, excepte si tant margin-left i margin-right s'estableixen en auto. En aquest cas, s'estableix el valor que centra l'element dins del seu pare. Mode de disseny de block
block, inline, inline-block, block, table, inline-table, list-item, table-caption left o right static o relative 0 Mode de disseny de block (element flotant)
qualsevol table-*, excepte table-caption qualsevol qualsevol 0 Els elements interns de table-* no tenen marges, utilitzeu border-spacing en el seu lloc
qualsevol, excepte flex, inline-flex, o table-* qualsevol fixed o absolute 0, excepte si tant margin-left i margin-right s'estableixen en auto. En aquest cas, s'estableix el valor que centra l'àrea de vora dins de width disponible, si es fixa. Mode de disseny absolutament posicionat
flex, inline-flex qualsevol qualsevol 0, excepte si hi ha algun espai lliure horitzontal positiu. En aquest cas, es distribueix uniformement a tots els marges auto horitzontals. Mode de disseny Flexbox

Sintaxi formal

<length> | <percentage> | auto

Exemples

.content { margin-left: 5%; }
.sidebox { margin-left: 10px; }
.logo    { margin-left: -5px; }

Especificacions

Especificació Estat Comentari
CSS Basic Box Model
The definition of 'margin-left' in that specification.
Working Draft No hi ha cap canvi significatiu des de CSS 2.1.
CSS Transitions
The definition of 'margin-left' in that specification.
Working Draft Defineix margin-left com animable.
CSS Flexible Box Layout Module
The definition of 'margin-left' in that specification.
Candidate Recommendation Defineix el comportament de margin-left en elements flex.
CSS Level 2 (Revision 1)
The definition of 'margin-left' in that specification.
Recommendation Igual que a CSS1, però elimina el seu efecte en els elements en línia
CSS Level 1
The definition of 'margin-left' in that specification.
Recommendation Definició inicial.

Navegadors compatibles

Descripció Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Suport bàsic 1.0 (Yes) 1.0 (1.7 or earlier) 3.0 3.5 1.0 (85)
auto value 1.0 (Yes) 1.0 (1.7 or earlier) 6.0 (strict mode) 3.5 1.0 (85)
Descripció Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Suport bàsic 1.0 (Yes) 1.0 (1) 6.0 6.0 1.0

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,