CSS : margin - Web Formation

Description

La propriété margin définit l’espace extérieur autour d’un élément.

Elle sépare un élément des autres éléments qui l’entourent, sans modifier sa taille interne. Il s’agit d’un espace réservé de contenu.

Elle s’inscrit dans le modèle de boîte CSS.

Propriétés détaillées

margin-top : marge supérieure
margin-right : marge droite
margin-bottom : marge inférieure
margin-left : marge gauche

Valeurs possible

Voici quelques exemples de valeurs possibles :

Valeur	Exemple	Description
Longueur	`10px`, `2rem`, `5%`	Les unités les plus courantes ; pixels ou unités relatives.
auto	`margin: auto;`	Permet de centrer horizontalement un élément ayant une largeur définie.
0	`margin: 0;`	Pas d’espace extérieur.

Propriété raccourcie

La propriété margin est une version raccourcie qui accepte 1 à 4 valeurs :

Syntaxe	Exemple	Interprétation
1 valeur	`margin: 20px;`	Tous les côtés = 20px
2 valeurs	`margin: 10px 20px;`	Vertical = 10px, horizontal = 20px
3 valeurs	`margin: 5px 10px 15px;`	Haut = 5, horizontal = 10, bas = 15
4 valeurs	`margin: 5px 10px 15px 20px;`	Haut – Droite – Bas – Gauche (sens des aiguilles d’une montre)

Exemple

Démonstration interactive : margin

Choisissez une valeur

Aperçu

Élément 1

Élément 2

Élément 3

30px tout autour des éléments

Code HTML & CSS

<div class="demo">Élément 1</div>
<div class="demo-2">Élément 2</div>
<div class="demo-3">Élément 3</div>

<div class="demo">Élément 1</div><div class="demo-2">Élément 2</div><div class="demo-3">Élément 3</div>

.demo {
    border: 1px solid gold;
    margin: 30px; /* 30px tout autour des éléments */
}
.demo-2 {
    border: 1px solid red;
    margin: 30px;
}
.demo-3 {
    border: 1px solid green;
    width:50%;
    margin: 30px;
}

.demo {    border: 1px solid gold;    margin: 30px; /* 30px tout autour des éléments */}.demo-2 {    border: 1px solid red;    margin: 30px;}.demo-3 {    border: 1px solid green;    width:50%;    margin: 30px;}

.demo {
    border: 1px solid gold;
    margin: auto; /* auto permet le centrage horizontal */
}
.demo-2 {
    border: 1px solid red;
    margin: auto;
}
.demo-3 {
    border: 1px solid green;
    width:50%;
    margin: auto;
}

.demo {    border: 1px solid gold;    margin: auto; /* auto permet le centrage horizontal */}.demo-2 {    border: 1px solid red;    margin: auto;}.demo-3 {    border: 1px solid green;    width:50%;    margin: auto;}

.demo {
    border: 1px solid gold;
    margin: 5px 100px 5px 100px; /* Haut, droite, bas, gauche */
}
.demo-2 {
    border: 1px solid red;
    margin: 5px 100px 5px 100px;
}
.demo-3 {
    border: 1px solid green;
    width:50%;
    margin: 5px 100px 5px 100px;
}

.demo {    border: 1px solid gold;    margin: 5px 100px 5px 100px; /* Haut, droite, bas, gauche */}.demo-2 {    border: 1px solid red;    margin: 5px 100px 5px 100px;}.demo-3 {    border: 1px solid green;    width:50%;    margin: 5px 100px 5px 100px;}

.demo {
    border: 1px solid gold;
    margin: 20px 50px; /* haut/bas et droite/gauche */
}
.demo-2 {
    border: 1px solid red;
    margin: 20px 50px;
}
.demo-3 {
    border: 1px solid green;
    width:50%;
    margin: 20px 50px;
}

.demo {    border: 1px solid gold;    margin: 20px 50px; /* haut/bas et droite/gauche */}.demo-2 {    border: 1px solid red;    margin: 20px 50px;}.demo-3 {    border: 1px solid green;    width:50%;    margin: 20px 50px;}