Marge CSS
La propriété CSS margin est utilisée pour créer de l'espace autour d'un élément. CSS fournit des propriétés individuelles pour définir la marge de chaque côté d'un élément (haut, droite, bas et gauche).
Les marges par côté
Avec l'aide des propriétés suivantes, vous pouvez définir la marge de chaque côté d'un élément :
Il est déjà évident que pour le haut nous utilisons margin-top, pour le bas margin-bottom, pour le côté gauche margin-left, et pour la droite margin-right.
Toutes les propriétés de marge acceptent les valeurs suivantes :
auto- la marge est calculée par le navigateur,length- spécifie une marge enpx,pt,cm, etc.,%- spécifie une marge en pourcentage de la largeur de l'élément contenant,inherit- spécifie que la marge doit être héritée de son élément parent.
La propriété margin accepte les valeurs négatives.
La propriété margin comme propriété raccourcie
La propriété CSS margin est une propriété raccourcie pour les propriétés de marge individuelles ci-dessous :
Lorsque la propriété margin possède quatre valeurs différentes, elle s'écrit comme suit dans le code :
CSS différentes marges
p {
margin-top: 25px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 20px;
}Si tous les côtés ont la même valeur, par exemple 50px pour tous, on peut l'écrire en CSS comme suit.
CSS même marge, code
p {
margin: 50px;
}Lorsque les côtés haut et bas ont la même valeur (par exemple, 15px) et que les côtés gauche et droite ont la même valeur (par exemple, 10px), vous pouvez utiliser le code suivant.
CSS margin avec 2 valeurs, code
p {
margin: 15px 10px;
}Cela équivaut à :
CSS margin avec 2 valeurs, version longue, code
p {
margin-top: 15px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 10px;
}Lorsque les côtés gauche et droite sont identiques (par exemple, 15px), que le côté haut est 5px et que le côté bas est 10px, vous pouvez écrire :
CSS margin avec 3 valeurs, code
p {
margin: 5px 15px 10px;
}Cela équivaut à :
CSS margin avec 3 valeurs, version longue, code
p {
margin-top: 5px;
margin-right: 15px;
margin-bottom: 10px;
margin-left: 15px;
}Exemple de la propriété margin :
Code de la propriété margin CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: white;
margin: 25px 10px 15px 20px;
}
</style>
</head>
<body>
<p>Paragraph with background-color, color and margin properties.</p>
</body>
</html>Résultat
La valeur auto de la propriété margin
Vous pouvez centrer horizontalement un élément dans son conteneur en définissant la propriété margin sur auto. En conséquence, l'élément occupera sa largeur définie, et l'espace restant sera réparti également entre les marges droite et gauche.
Exemple de la propriété margin avec la valeur "auto" :
Exemple d'utilisation de la valeur « auto » de la propriété margin :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 300px;
margin: auto;
background-color: red;
}
</style>
</head>
<body>
<h2>The auto value</h2>
<p>
Setting the “auto” value of the margin property you can horizontally center the element inside its container. As a result, the element will take up the defined width and the space that remains, will be divided between the right and left margins.
</p>
<div>
The auto value horizontally centered this div.
</div>
</body>
</html>La valeur inherit de la propriété margin
Dans l'exemple ci-dessous, la marge gauche de l'élément <p> est héritée de son élément parent (<div>) :
Exemple de la propriété margin avec la valeur "inherit" :
Exemple d'utilisation de la valeur « inherit » de la propriété margin
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: lightblue;
margin-left: 100px;
}
p.inherit {
margin-left: inherit;
padding: 10px 0;
}
</style>
</head>
<body>
<h2>The inherit value</h2>
<p>
Here the left margin is inherited from its parent element:
</p>
<div>
<p class="inherit">
With the help of the "inherit" value, the left margin is inherited from the div element.
</p>
</div>
</body>
</html>Pratique
Quelles propriétés peut-on définir avec la marge CSS ?