Gestion des marges externes (margin) en CSS

En CSS, nous allons devoir distinguer deux types de marges : les marges intérieures (“padding”) et les marges extérieures (“margin”).

Les marges intérieures se trouvent entre le contenu de l’élément et sa bordure. Les marges extérieures, au contraire, vont définir la taille de l’espace autour d’un élément.

Les marges extérieures se trouvent en dehors des bordures d’un élément et servent généralement à éloigner un élément d’un autre. Lorsqu’on définit une couleur de fond pour un élément, cette couleur de fond ne va pas s’appliquer dans l’espace des marges extérieures car encore une fois celles-ci se trouvent « en dehors » de l’élément.

 

La propriété CSS margin

Nous allons pouvoir ajouter des marges externes à un élément grâce à la propriété CSS margin. Cette propriété est en fait la notation raccourcie des propriétés margin-top, margin-left, margin-bottom et margin-right qui vont servir à définir les marges externes de chaque côté d’un élément.

Ces propriétés vont pouvoir accepter différents types de valeurs :

• Des valeurs de type longueur, généralement en px ou en em ;
• Des valeurs de type pourcentage. Dans ce cas, le % indiqué est calculé par rapport à la taille de l’élément parent ;
• Le mot clef auto. Ce mot clef va surtout nous servir pour centrer des blocs.

Notez qu’à la différence de la propriété padding, nous allons pouvoir passer des valeurs négatives à margin pour créer des marges externes négatives même si en pratique cela est généralement déconseillé pour les problèmes d’ergonomie et de consistance du design que ça peut causer au niveau de la page.

Notez également que la plupart des navigateurs définissent des marges par défaut pour de nombreux éléments. Il faudra donc souvent effectuer un reset des marges dans nos feuilles de styles (en définissant des marges nulles pour les différents éléments) pour être certain d’obtenir le résultat attendu.

 

Ajouter une même marge externe de chaque côté d’un élément

Pour définir une même marge externe de chaque côté d’un élément, il suffit de passer la valeur de la marge extérieure que l’on souhaite appliquer à l’élément à la propriété margin en CSS.

Par exemple, pour appliquer une marge extérieure de 25px de chaque côté d’un élément, on écrira en CSS margin : 25px. Pour que la marge extérieure représente 10% de la taille de l’élément parent de notre élément, on écrira margin : 10% tout simplement.

Nous allons bien évidemment également pouvoir définir des marges externes égales pour chaque côté d’un élément en utilisant les propriétés margin-top, margin-left, margin-bottom et margin-right et en leur passant la même valeur à chacune.

See the Pen Cours HTML CSS 5.5.1 by Pierre (@pierregiraud) on CodePen.

Ici, vous pouvez noter que les bordures d’un élément définissent la « limite » de cet élément. Les marges externes sont un espace entre les éléments et c’est la raison pour laquelle nous ne pouvons pas appliquer de couleur de fond (entre autres) dans l’espace des marges externes de l’élément.

Notez également qu’on ne va pas pouvoir appliquer de marges haute ou basse aux éléments de type inline comme c’était déjà le cas pour les marges internes. En revanche, les marges externes droite et gauche s’appliquent normalement.

 

Définir des marges externes différentes de chaque côté d’un élément

Nous allons également pouvoir appliquer des marges extérieures de taille différentes de chaque côté d’un élément.

Pour cela, nous avons deux façons de faire : soit en passant plusieurs valeurs à la propriété margin, soit en utilisant les propriétés margin-top, margin-left, margin-bottom et margin-right.

On va en effet pouvoir passer entre 1 et 4 valeurs à la propriété raccourcie margin :

• En passant une valeur à margin, la valeur passée définira le comportement des 4 marges extérieures de l’élément ;
• En passant deux valeurs à margin, la première valeur passée définira le comportement des marges extérieures supérieure et inférieure de l’élément tandis que la seconde valeur définira le comportement des marges extérieures gauche et droite de l’élément ;
• En passant trois valeurs à margin, la première valeur passée définira le comportement de la marge externe supérieure, la deuxième définira le comportement des marges extérieures gauche et droite tandis que la troisième définira le comportement de la marge externe basse ;
• En passant quatre valeurs à margin, la première valeur passée définira le comportement de la marge externe supérieure, la deuxième définira le comportement de la marge externe droite, la troisième celui de la marge externe basse et la quatrième celui de la marge externe gauche.

See the Pen Cours HTML CSS 5.5.2 by Pierre (@pierregiraud) on CodePen.

 

La fusion ou « collapsing » des marges externes verticales

Une des grandes différences entre l’implémentation des marges internes et des marges externes est que les marges externes haute et basse de deux éléments vont pouvoir « fusionner » selon certaines conditions.

La fusion des marges externes d’éléments consécutifs

Si on définit une marge basse à un premier élément de type block et une marge haute à l’élément suivant, alors les hauteurs des deux marges ne vont pas s’additionner mais vont « fusionner ». En effet, seule la marge la plus importante sera appliquée.

Par exemple, imaginons qu’on ait défini une margin-bottom : 30px pour notre premier élément et une margin-top : 50px pour l’élément suivant. Les deux éléments ne seront pas séparés de 30 + 50 = 80px mais seulement de la taille de la marge la plus importante parmi les deux, à savoir ici 50px.

De même, si deux éléments consécutifs possèdent deux marges négatives, alors seule la marge négative la plus importante sera conservée.

Dans le cas où un élément possède une marge basse externe positive et le suivant possède une marge haute externe négative (ou le contraire), alors la marge négative va se soustraire à la marge positive. Par exemple, si le premier élément possède une margin-bottom : 50px et le deuxième élément a une margin-top : -30px, alors la marge appliquée sera de 50 – 30 = 20px.

See the Pen Cours HTML CSS 5.5.3 by Pierre (@pierregiraud) on CodePen.

La fusion des marges entre un élément parent et son premier et dernier enfant

Cette deuxième situation de fusion des marges est plus complexe que la première. Pour faire très simple, vous pouvez retenir qu’il va y avoir fusion entre un élément parent et son premier enfant s’il n’y a aucune bordure ou remplissage entre sa marge haute et la marge haute de son enfant.

De même, il y aura fusion entre la marge basse du parent et la marge basse de son dernier enfant s’il n’y a aucune bordure ou remplissage pour les séparer et si aucune propriété height, min-height ou max-height n’est définie bien évidemment.

See the Pen Cours HTML CSS 5.5.4 by Pierre (@pierregiraud) on CodePen.

Fusion des marges d’un bloc vide

Finalement, si un élément de type block est vide, c’est-à-dire ne possède aucun contenu, bordure, remplissage et qu’on ne lui a pas défini de hauteur fixe alors ses marges hautes et basses vont également fusionner.

See the Pen Cours HTML CSS 5.5.5 by Pierre (@pierregiraud) on CodePen.

Notez bien à nouveau que cet effet de collapse ne va pouvoir avoir lieu qu’avec les marges supérieure et inférieure des éléments et ne va pas se manifester pour les marges gauches et droite.

 

Utiliser margin pour centrer un élément dans son parent

La propriété margin va souvent être utilisée pour centrer horizontalement un élément dans son parent.

Pour faire cela, nous allons devoir définir des marges externes auto à gauche et à droite de l’élément qui devra être centré.

Attention toutefois : cela ne va fonctionner que sur des éléments de type block car centrer des éléments inline (en ligne) dans leur parent n’aurait aucun sens.

De plus, afin de voir l’effet du centrage, il va falloir définir explicitement une largeur pour l’élément qui devra être centré avec la propriété width et lui passer une largeur plus petite que celle de son parent.

See the Pen Cours HTML CSS 5.5.6 by Pierre (@pierregiraud) on CodePen.

Notez bien ici que c’est l’élément entier qui est centré dans son conteneur et non pas le contenu de l’élément qui est centré dans l’élément. Pour centrer horizontalement le contenu d’un élément dans l’élément en soi, on utilisera la propriété text-align et sa valeur center.

Pour centrer l’élément et son contenu, il suffit donc d’utiliser les propriétés margin et text-align ensemble.

See the Pen Cours HTML CSS 5.5.7 by Pierre (@pierregiraud) on CodePen.