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.
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é 🟦.
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-topmargin-rightmargin-bottommargin-left
Par exemple:
L’option margin-right de l’exemple ci-dessus peut donner l’impression de ne pas fonctionner, mais la marge est bel et bien ajouté, elle est simplement combinée avec celle de son parent. Plus sur les combinaisons de marges plus bas 👇
- mt
- mr
- mb
- ml
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.
Combinaison de marges
À l'occasion certaines marges sont combinées. C'est ce que les anglophones appellent "margin collapse". Ce comportement peut paraitre é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'assuere 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ée. Seulement celles verticales ↕️
En savoir plus Excellent billet de Josh W Comeau expliquant le margin collapse.