La propriété Margin de CSS est utilisée pour définir l’espace autour des éléments. Il est complètement transparent et n’a pas de couleur de fond. Cela efface une zone autour de l’élément.
Les marges supérieure, inférieure, gauche et droite peuvent être modifiées indépendamment à l’aide de propriétés distinctes. Vous pouvez également modifier toutes les propriétés en même temps à l’aide de la propriété de marge abrégée.
Les propriétés de margin sont les suivantes:
Propriétés de margin
| Propriété | La description |
|---|---|
| margin | Cette propriété est utilisée pour définir toutes les propriétés dans une déclaration. |
| margin-left | il est utilisé pour définir la marge gauche d’un élément. |
| margin-right | Il est utilisé pour définir la marge droite d’un élément. |
| margin-top | Il est utilisé pour définir la marge supérieure d’un élément. |
| margin-bottom | Il est utilisé pour définir la marge inférieure d’un élément. |
Valeurs de la propriété margin
Voici quelques valeurs possibles pour la propriété margin.
| Valeur | La description |
|---|---|
| auto | Ceci est utilisé pour laisser le navigateur calculer une marge. |
| longueur | Il est utilisé pour spécifier un point de marge, une px, une cm, etc. Sa valeur par défaut est 0px. |
| % | Il est utilisé pour définir une marge en pourcentage de la largeur de l’élément conteneur. |
| inherit | Il est utilisé pour hériter de la marge de l’élément parent. |
Remarque: vous pouvez également utiliser des valeurs négatives pour superposer du contenu.
Exemple de margin
Vous pouvez définir différentes marges pour différents côtés pour un élément.
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: pink;
}
p.ex {
margin-top: 50px;
margin-bottom: 50px;
margin-right: 100px;
margin-left: 100px;
}
</style>
</head>
<body>
<p>Ce paragraphe ne s'affiche pas avec la marge spécifiée.</p>
<p class="ex">Ce paragraphe est affiché avec une marge spécifiée.</p>
</body>
</html>
Résultat :
