La propriété margin
permet de définir la taille des marges sur les quatre côtés de l'élément. C'est une propriété raccourcie qui permet de manipuler les autres propriétés de marges : margin-top
, margin-right
, margin-bottom
and margin-left
.
Il est possible d'utiliser des valeurs négatives pour chacun des côtés.
Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :
|
---|---|
Applicabilité | tous les éléments exceptés ceux dont les types display pour les tableaux ne sont pas table-caption , table et inline-table . S'applique aussi à ::first-letter . |
Héritée | non |
Pourcentages | se rapporte à la largeur du bloc contenant |
Média | visuel |
Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
Animable | oui, comme une longueur |
Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Syntaxe
/* La propriété s'applique aux quatre côtés */ margin: 1em; /* vertical | horizontal */ margin: 5% auto; /* haut | horizontal | bas */ margin: 1em auto 2em; /* haut | droit | bas | gauche */ margin: 2px 1em 0 auto; /* Valeurs globales */ margin: inherit; margin: initial; margin: unset;
Valeurs
Cette propriété peut accepter une, deux, trois ou quatre valeurs avec les types suivants :
<length>
- La marge est définie avec une valeur absolue. On peut utiliser des valeurs négatives. Pour les différentes unités possibles, voir la page
<length>
. <percentage>
- Une valeur relative, exprimée en pourcentage (type
<percentage>
, à la largeur du bloc englobant. On peut utiliser des valeurs négatives. auto
auto
est remplacé par une valeur adaptée (il peut être utilisé pour centrer les blocs, par exemple,div { width:50%; margin:0 auto; }
permet de centrer un conteneurdiv
horizontalement).
Cardinalité de la propriété raccourcie
- Une valeur appliquera la même marge aux quatre côtés.
- Deux valeurs appliqueront la première en haut et en bas et la seconde sur les côtés gauche et droit.
- Trois valeurs appliqueront la première en haut, la deuxième à gauche et à droite, la troisième sera appliquée en bas.
- Quatre valeurs s'appliqueront respectivement en haut, à droite, en bas et à gauche.
Syntaxe formelle
[ <length> | <percentage> | auto ]{1,4}
Exemples
Exemple simple
CSS
.ex1 { margin: auto; background: gold; width: 66%; } .ex2 { margin: 20px 0px 0 -20px; background: gold; width: 66%; }
HTML
<div class="ex1"> margin: auto; background: gold; width: 66%; </div> <div class="ex2"> margin: 20px 0 0 -20px; background: gold; width: 66%; </div>
Résultat
Autres exemples
margin: 5%; /* tous les côtés avec une marge de 5% */ margin: 10px; /* tous les côtés avec une marge de 10px */ margin: 1.6em 20px; /* haut et bas à 1.6em */ /* gauche et droite à 20px */ margin: 10px 3% 1em; /* haut à 10px, gauche et droite à 3% */ /* bas à 1em */ margin: 10px 3px 30px 5px; /* haut à 10px, droite à 3px */ /* bas à 30px, gauche à 5px */ margin: 1em auto; /* marge de 1em en haut et en bas */ /* la boîte est centrée horizontalement */ margin: auto; /* boîte centrée horizontalement */ /* marge nulle en haut et en bas */
Centrer horizontalement avec margin: 0 auto;
Afin de centrer un élément horizontalement, avec un navigateur « moderne » on peut utiliser display: flex; justify-content: center;
.
Les anciens navigateurs comme IE8-9 ne gère pas ces valeurs. Aussi, il faudra utiliser margin: 0 auto
pour centrer un élément au sein de son parent.
Spécifications
Spécification | État | Commentaires |
---|---|---|
CSS Basic Box Model La définition de 'margin' dans cette spécification. |
Version de travail | Aucun changement significatif. |
CSS Transitions La définition de 'margin' dans cette spécification. |
Version de travail | margin peut désormais être animée. |
CSS Level 2 (Revision 1) La définition de 'margin' dans cette spécification. |
Recommendation | Retrait de l'effet sur les éléments en ligne (inline). |
CSS Level 1 La définition de 'margin' dans cette spécification. |
Recommendation | Définition initiale. |
Compatibilité des navigateurs
Fonctionnalité | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Support simple | 1.0 | 1.0 (1.7 ou moins) | 3.0 | 3.5 | 1.0 (85) |
auto |
1.0 | 1.0 (1.7 ou moins) | 6.0 (strict mode) | 3.5 | 1.0 (85) |
Fonctionnalité | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Support simple | 1.0 | 1.0 (1) | 6.0 | 6.0 | 1.0 |