Margin

4

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.

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é 🟦.

Voir le CodePen de Simon Arnold (@smnarnold).

Les éléments de type inline (span, a, etc.) ne sont pas affectés par les marges verticales ↕️

Raccourci Emmet: m

Pour en savoir plus, voir l'article MDN à propos de margin.

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:

Voir le CodePen de Simon Arnold (@smnarnold).

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 👇

Raccourcis Emmet: mt = margin-top, mr = margin-right, mb = margin-bottom et ml = margin-left

Pour en savoir plus, voir ces articles MDN à propos de margin-top, margin-right, margin-bottom et margin-left.

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:

Voir le CodePen de Simon Arnold (@smnarnold).

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:

Voir le CodePen de Simon Arnold (@smnarnold).

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.

Voir le CodePen de Simon Arnold (@smnarnold).

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

Pour centrer horizontalement un élément avec 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 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 ↕️

Pour en savoir plus sur ce comportement, je vous suggère l'excellent billet de Josh W Comeau expliquant le margin collapse en détail.

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme