Propriété CSS margin
La propriété CSS margin est utilisée pour créer de l’espace autour de l’élément.
La propriété margin est un raccourci pour les propriétés suivantes :
Nous pouvons utiliser la propriété margin pour tous les côtés (haut, bas, gauche, droite) en même temps. Pour le côté supérieur, nous utilisons margin-top, pour le bas margin-bottom, pour le côté gauche margin-left et pour le côté droit margin-right.
La propriété margin peut être définie avec une, deux, trois ou quatre valeurs :
- margin : 25px 10px 15px 20px. Ce code signifie que la marge en haut doit être de 25px, à droite de 10px, en bas de 15px et à gauche de 20px.
- margin: 15px 10px 20px. Cela signifie que la marge en haut doit être de 15px, à droite et à gauche de 10px, et en bas de 20px.
- margin: 15px 10px. Ce code signifie que les marges du haut et du bas sont de 15px, et celles de droite et de gauche de 10px.
- Si la marge n’a qu’une seule valeur, elle est appliquée aux quatre côtés.
INFO
Les valeurs négatives sont valides.
INFO
Les marges du haut et du bas n’ont aucun effet sur les éléments en ligne, tels que <span> ou <code>.
| Initial Value | 0 |
|---|---|
| Applies to | All elements. |
| Inherited | No. |
| Animatable | Yes. Outline is animatable. |
| Version | CSS1 |
| DOM Syntax | Object.style.margin = "20px 10px"; |
Syntaxe
Syntaxe de la propriété CSS margin
margin: length | auto | initial | inherit;Exemple de la propriété margin :
Exemple de la propriété CSS margin avec quatre valeurs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: #fff;
margin: 25px 10px 15px 20px;
}
</style>
</head>
<body>
<h2>Margin property example</h2>
<p>Paragraph with background-color, color and margin properties.</p>
</body>
</html>Résultat
Exemple de la propriété margin, où la marge d’un élément est définie à 10 % pour tous les côtés :
Exemple de la propriété CSS margin avec une valeur % (pourcentage)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.example {
margin: 10%;
}
</style>
</head>
<body>
<h2>Margin property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="example">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Exemple de la propriété margin définie comme "em" :
Exemple de la propriété CSS margin avec une valeur em
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.example {
margin: 4em;
}
</style>
</head>
<body>
<h2>Margin property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="example">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Voyons l’exemple suivant qui montre la différence entre les propriétés margin, padding et border :
Exemple de la propriété margin avec les propriétés padding et border :
Exemple de la propriété CSS margin avec une valeur (px)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: #eee;
width: 200px;
border: 20px solid #8ebf42;
padding: 30px;
margin: 55px;
}
</style>
</head>
<body>
<h2>Margin property example</h2>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</body>
</html>Valeurs
| Value | Description | Play it |
|---|---|---|
| auto | Définit la marge. C’est la valeur par défaut de cette propriété. | Play it » |
| length | Définit une marge en px, pt, cm, etc. La valeur par défaut est 0. | Play it » |
| % | Définit la marge en % de l’élément conteneur. | Play it » |
| initial | Fait en sorte que la propriété utilise sa valeur par défaut. | Play it » |
| inherit | Hérite de la propriété de l’élément parent. |
Practice
Which of the following statements are true about CSS Margins?