margin
Définit l’espace extérieur d’un élément par rapport à ses voisins.
- Valeur initiale
0- Héritée
- Non
- Animable
- oui, en tant que longueur
- S’applique à
- tous les éléments sauf les éléments internes des tableaux
- JavaScript
element.style.margin = "16px auto"
Exemple
#.page {
max-width: 420px;
margin: 0 auto;
}
.page h2 {
margin-bottom: 8px;
}<div class="page stage">
<h2 style="margin-top: 0">Une page centrée</h2>
<p style="margin: 0">Un bloc d’une largeur maximale de 420px se retrouve centré grâce à margin: 0 auto.</p>
</div>Définition et utilisation
#La propriété margin est un raccourci pour quatre marges extérieures : margin-top, margin-right, margin-bottom et margin-left. Une marge extérieure est un espace transparent à l’extérieur de la bordure, qui écarte l’élément des autres.
Une valeur définit les quatre côtés, deux définissent séparément le vertical et l’horizontal, trois définissent le haut, l’horizontal et le bas, et quatre définissent dans l’ordre le haut, la droite, le bas et la gauche (dans le sens des aiguilles d’une montre). Une valeur auto en horizontal centre un bloc de largeur définie.
Attention à la fusion des marges : les marges verticales de blocs voisins ne s’additionnent pas, seule la plus grande est retenue. Ce phénomène n’existe pas dans les conteneurs flex et grid.
Syntaxe
#margin: <haut> <droite>? <bas>? <gauche>?;Valeurs
#- Aucune marge. Les rayures de fond du parent touchent l’élément.
<longueur>
Une marge égale de 16px sur chaque côté.vertical horizontal
8px en haut et en bas, 40px sur les côtés.auto
autoen horizontal centre un bloc de largeur connue.valeur négative
Une marge négative rapproche l’élément, voire le fait dépasser de son parent.
Valeurs en pratique
#0
.demo { margin: 0; }16px
.demo { margin: 16px; }8px 40px
.demo { margin: 8px 40px; }12px auto
auto en horizontal centre un bloc de largeur connue..demo { margin: 12px auto; }-8px
.demo { margin: -8px; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Pour l’espacement entre des éléments d’une rangée ou d’une grille, utilisez
gap, pas les marges. - Les propriétés logiques
margin-inlineetmargin-blockfonctionnent aussi correctement dans les langues écrites de droite à gauche.
Entrées associées
#- margin vs paddingmargin est un espace transparent à l’extérieur de l’élément. padding est l’espace à l’intérieur de la bordure, entre le contenu et le bord, et prend le fond de l’élément.
- paddingDéfinit l’espace intérieur entre le contenu et la bordure.
- borderRaccourci qui définit l’épaisseur, le style et la couleur d’une bordure.
- gapDéfinit l’espace entre les éléments d’un conteneur flex, grid ou multi-colonnes.
- box-sizingDécide si width et height incluent la marge intérieure et la bordure.
- margin-inlineDéfinit les marges au début et à la fin d’une ligne. La version logique de margin-left et margin-right, qui comprend le sens d’écriture.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.