Margin¶

La propriété margin définit un espace vide devant être respecté autour d'un élément, bref une marge. Par défaut, cette propriété à une valeur de 0 permettant aux éléments de s'afficher un à la suite de l'autre sans espace vide** (collés un à l'autre)**, mais elle accepte l'ensemble des unités de mesure CSS.

Note

Contrairement à padding, margin accepte les valeurs négatives.

Lorsqu'une seule valeur est fournie, celle-ci est appliquée aux 4 côtés de l'élément.

Dans l'exemple suivant, remarquez comment le changement de margin affecte l'espace autour du carré 2.

Warning

Les éléments aillant un display: inline (span, a, etc.) ne sont pas affectés par les marges verticales ↕️ par défaut.

Sous-propriétés¶

Pour plus de contrôle, il est possible d'attribuer une valeur différente à chaque côté en utilisant les sous-propriétés suivantes:

margin-top
margin-right
margin-bottom
margin-left Par exemple:

Syntaxe courte¶

Il est aussi possible d'attribuer les 4 côtés avec la syntaxe courte en les spécifiant un après l'autre en commençant par le haut et en tourant dans le sens des aiguilles d'une montre ⌚️ (top, right, bottom et left).

Par exemple:

Syntaxe courte à deux valeurs¶

Lorsque seulement deux valeurs sont spécifiées la première est utilisée afin de déterminer la marge verticale ↕️ (top et bottom) et la deuxième la marge horizontale ↔️ **(left et right). ** Par exemple:

Alignement horizontal ↔️¶

Les marges sont régulièrement utilisées afin de centrer horizontalement ↔️ des éléments dans leurs parents. Pour ce faire, il suffit d'attribuer la valeur auto aux marges de gauche et de droite.

Note

Cette technique de centrage est généralement utilisée avec la syntaxe à deux valeurs, soit margin: 0 auto;

Danger

ERREUR FRÉQUENTE Pour centrer horizontalement un élément avec la propriété margin et la valeur auto, un élément doit être en display: block

Combinaison de marges¶

À l'occasion, certaines marges sont combinées. C'est ce que les anglophones appellent "margin collapse". Ce comportement peut paraître étrange à première vue, mais il respecte le concept de marge qui est de générer un espace vide entre un élément et ceux l'entourant.

L'exemple le plus commun est celui des paragraphes (p) qui ont un margin-top et un margin-bottom équivalent à la hauteur d'une lettre (1em), soit une ligne. Si une image est insérée après un paragraphe, le margin-bottom de ce dernier s'assure qu'un espace équivalent à une ligne les sépare. Cependant, que se passe-t-il lorsque deux paragraphes se suivent?

Un espace équivalent à une seule ligne les sépare, car leurs marges sont combinées plutôt qu'additionnées.

Cependant, ce ne sont pas toutes les marges qui sont combinées. Seulement celles verticales ↕️.