Propriété margin

La propriété margin définit la marge externe d'un élément. Les valeurs de la propriété sont n'importe quelle unité de taille ou la propriété clé auto, laissant le navigateur calculer automatiquement la marge de l'élément. Par défaut, chaque navigateur peut ajouter différentes marges aux éléments.

La propriété est un raccourci pour les propriétés margin-top, margin-right, margin-bottom, margin-left.

Syntaxe

sélecteur {
	margin: valeur;
}

Nombre de valeurs

La propriété margin accepte 1, 2, 3 ou 4 valeurs, énumérées séparées par un espace :

Nombre	Description
`1`	Une valeur définit la marge sur tous les côtés de l'élément.
`2`	La première valeur définit la marge en haut et en bas, et la seconde - à droite et à gauche.
`3`	La première valeur définit la marge en haut, la seconde - à droite et à gauche, et la troisième - en bas.
`4`	La première valeur définit la marge en haut, la seconde - à droite, la troisième - en bas, et la quatrième - à gauche.

Exemple

Nous allons maintenant avoir un bloc sans marges :

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 0;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

Exemple

Maintenant, définissons une marge de 10px pour le bloc :

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 10px;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

Exemple

Définissons une marge de 10px en haut et en bas et 20px - à gauche et à droite :

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 10px 20px;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

Exemple

Définissons une marge de 5px en haut, 15px à droite, 25px en bas et 35px à gauche :

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 5px 15px 25px 35px;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

Voir aussi

la propriété padding,
qui définit la marge interne