Les marges externes (margin) permettent de créer de l'espace entre les boîtes des éléments HTML.

Les éléments de type bloc ont des marges sur les 4 côtés de leur boîte.

Les éléments en ligne ont des marges uniquement à droite et à gauche.

Marges externes type bloc
Marges externes type en ligne

Les marges externes sont toujours transparentes et il n'est pas possible de leur donner une couleur ou une image de fond.

Certains éléments ont des marges externes prédéfinies par les navigateurs (par exemple body, p, ul, etc). Ces valeurs prédéfinies peuvent être différentes d'un navigateur à un autre.
Pour être sûr d'avoir les mêmes marges sur tous les navigateurs, il est conseillé de les fixer dans la feuille de style pour les éléments utilisés dans les pages (voir Principes généraux => La cascade).

Si les marges externes ne sont pas prédéfinies ou omises, elles ont par défaut la valeur 0.

L'unité de taille pour définir une marge est à choisir en fonction du dispositif d'affichage. Par exemple il ne faut pas utiliser des centimètres pour afficher sur un écran pour lequel on privilégiera le pixel CSS (`px`), le cadratin (`em`), le pourcentage (`%`) ou la référence à la racine du document (`rem`).
Les unités utilisées peuvent être différentes pour chacune des marges d'un élément.

Si les marges externes hautes et basses (margin-top et margin-bottom) sont exprimées en pourcentage (`%`), la valeur est calculée par rapport à la longueur de la boîte et pas par rapport à la hauteur.

Les marges externes permettent de centrer horizontalement un bloc dans son conteneur : il faut donner la valeur `auto` aux marges droite et gauche.

Les marges externes peuvent avoir une valeur négative.

### La propriété margin

La propriété margin est un raccourci qui permet de définir les marges des 4 côtés en une seule fois.

On peut affecter 1, 2, 3 ou 4 valeurs à la propriété margin.

    h1 { margin: 5px; }
    h2 { margin: 4px 8px; }
    h3 { margin: 5px 6px 7px 8px; }

raccourci margin

Remarque : la forme avec 3 valeurs est rarement utilisée : la marge haute aura la 1ère valeur, les marges droite et gauche auront la 2ème valeur et la marge basse aura la 3ème valeur.

Exemple : marges avec raccourci
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <div> <p>Les marges du paragraphe sont visibles en lui mettant une bordure et en l'imbriquant dans un élément div qui a lui aussi une bordure. Les marges sont l'espace entre les traits bleus et rouges. </p> </div> <div> <p>Les marges du paragraphe sont visibles en lui mettant une bordure et en l'imbriquant dans un élément div qui a lui aussi une bordure. Les marges sont l'espace entre les traits bleus et rouges. </p> </div> <div> <p>Les marges du paragraphe sont visibles en lui mettant une bordure et en l'imbriquant dans un élément div qui a lui aussi une bordure. Les marges sont l'espace entre les traits bleus et rouges. </p> </div> <div> <p>Les marges du paragraphe sont visibles en lui mettant une bordure et en l'imbriquant dans un élément div qui a lui aussi une bordure. Les marges sont l'espace entre les traits bleus et rouges. </p> </div> </body> </html>
Fichier CSS : styles.css
div { width: 400px; border: 2px solid red; margin-bottom: 1em; } p { border: 2px solid cyan; } div:first-of-type p { margin: 20px; } div:nth-of-type(2) p { margin: 1em 2em; } div:nth-of-type(3) p { margin: 10px 20px 30px; } div:last-of-type p { margin: 10px 20px 30px 40px; }

### Propriétés individualisées

Les propriétés margin-top, margin-right, margin-bottom et margin-left permettent de définir individuellement les marges des 4 côtés de la boîtes.

La valeur des propriétés de marge est un nombre d'unités.

    h1 { margin-top: 10px; }
    h2 { margin-right: 1em; }
    h3 {
    	margin-bottom: 10%;
    	margin-left: 2.5rem;
    }

Exemple : marges individualisées
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>Marges prédéfinies dans le navigateur</h3> <div> <p>Les marges du paragraphe sont visibles en lui mettant une bordure et en l'imbriquant dans un élément div qui a lui aussi une bordure. Les marges sont l'espace entre les traits bleus et rouges. </p> </div> <h3>Marges fixées</h3> <div> <p id="marge-haut">La marge haute est fixée à 2em. Comme la marge basse n'est pas spécifiée, elle garde la marge prédéfinie par le navigateur (1em).</p> </div> <div> <p id="marge-bas-gauche">Quand la valeur est un pourcentage, c'est un pourcentage de la dimension du bloc parent.</p> </div> </body> </html>
Fichier CSS : styles.css
div { width: 400px; border: 2px solid red; } p { border: 2px solid cyan;} #marge-haut { margin-top: 2em; } #marge-bas-gauche { margin-bottom: 2rem; margin-left: 10%; }

### Fusion des marges

La fusion des marges (collapsing margins) concerne les marges supérieures et inférieures des boîtes de type bloc. Quand 2 boîtes se suivent, il n'y a pas addition de la marge inférieure du 1er bloc avec la marge supérieure du 2ème bloc. Seule la marge la plus haute est conservée.

pas d'addition des marges verticales | seule la marge la plus haute est gardée

Exemple : fusion des marges
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <div>Premier bloc avec une marge inférieure de 20 pixels.</div> <div>Deuxième bloc avec une marge supérieure de 10 pixels. La marge séparant les 2 blocs n'est pas de 30 pixels, mais de 20 pixels (marge la plus grande).</div> </body> </html>
Fichier CSS : styles.css
div:first-of-type { margin-bottom: 20px; } div:last-of-type { margin-top: 10px; } /* Pour délimiter visuellement les blocs */ div { border: 1px solid red; padding: 1px; } /* Suppression des marges par défaut de body et affichage d'une règle */ body { background: url(../exemples/img/regle.png) no-repeat; margin: 0 0 0 20px; padding: 0; font: 20px verdana, helvetica, sans-serif; }

La fusion des marges (collapsing margins) concerne aussi les marges supérieures et inférieures des boîtes qui sont imbriquées. Quand 2 boîtes sont imbriquées, il n'y a pas addition de la marge supérieure du bloc parent avec la marge supérieure du bloc enfant. Seule la marge la plus haute est conservée. On a le même procédé pour les marges inférieures.

pas d'addition des marges verticales | seule la marge la plus haute est gardée

Exemple : fusion des marges
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <div id="bloc1"> <div id="bloc2">Deuxième bloc avec une marge supérieure de 30 pixels. La marge haute totale n'est pas de 20 pixels + 30 pixels, mais de 30 pixels (marge la plus grande). La marge basse est de 40 pixels (marge la plus grande).</div> </div> <hr> </body> </html>
Fichier CSS : styles.css
#bloc1 { margin: 20px 0 40px 0; background: red; } #bloc2 { margin: 30px 0 10px 0; background: cyan; } /* Suppression des marges par défaut de body et affichage d'une règle */ body { background: url(../exemples/img/regle.png) no-repeat; margin: 0 0 0 20px; padding: 0; font: 20px verdana, helvetica, sans-serif; }

Le mécanisme de fusion des marges des boîtes imbriquées est arrêté si le bloc parent contient du texte, ou si il a une bordure.

Exemple : fusion des marges
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <div id="bloc1"> <div id="bloc2">Comme le bloc parent a une bordure, toutes les marges sont prises en compte. En haut : 20 pixels pour le parent, puis 30 pixels pour l'enfant. En bas : 10 pixels pour l'enfant et 40 pixels pour le parent.</div> </div> <hr> </body> </html>
Fichier CSS : styles.css
#bloc1 { margin: 20px 0 40px 0; background: red; border: 1px solid black; } #bloc2 { margin: 30px 0 10px 0; background: cyan; } /* Suppression des marges par défaut de body et affichage d'une règle */ body { background: url(../exemples/img/regle.png) no-repeat; margin: 0 0 0 20px; padding: 0; font: 20px verdana, helvetica, sans-serif; }

Le mécanisme de fusion des marges des boîtes n'est pas utilisé pour les boîtes en positionnement flottant (`float: left` ou `float: right`), en positionnement absolu (`position: absolute`) ou en positionnement fixe ( `position: fixed`).