Les marges sont utilisées pour créer un espace autour des éléments, en dehors de toute bordure définie.
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 70px;
border: 1px solid #4CAF50;
}
</style>
</head>
<body>
<h2>CSS Margins</h2>
<div>This element has a margin of 70px.</div>
</body>
</html>
Les propriétés CSS margin
sont utilisées pour créer un espace autour des éléments, en dehors de toute frontière définie.
Avec CSS, vous avez un contrôle total sur les marges. Il y a des propriétés pour définir la marge de chaque côté d'un élément (haut, droite, bas et gauche).
CSS a des propriétés pour spécifier la marge de chacun côté d'un élément :
margin-top
margin-right
margin-bottom
margin-left
Toutes les propriétés de marge peuvent avoir les valeurs suivantes :
auto - le navigateur calcule la marge
longueur - spécifie une marge en px, pt, cm, etc.
% - spécifie une marge en % de la largeur de l'élément conteneur
hériter - spécifie que la marge doit être héritée de l'élément parent
Conseil : Les valeurs négatives sont autorisées.
Définissez des marges différentes pour les quatre côtés d'un élément <p> :
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Using individual margin properties</h2>
<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.</div>
</body>
</html>
Pour raccourcir le code, il est possible de préciser toutes les propriétés de marge dans une propriété.
La propriété margin
est une propriété abrégée pour les propriétés de marge individuelles suivantes :
margin-top
margin-right
margin-bottom
margin-left
Voici donc comment cela fonctionne :
Si la propriété margin
a quatre valeurs :
margin: 25px 50px 75px 100px;
la marge supérieure est de 25 px
la marge droite est de 50px
la marge inférieure est de 75 px
la marge gauche est de 100px
Utilisez la propriété raccourcie margin avec quatre valeurs :
p {
margin: 25px 50px 75px 100px;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 25px 50px 75px 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>The margin shorthand property - 4 values</h2>
<div>This div element has a top margin of 25px, a right margin of 50px, a bottom margin of 75px, and a left margin of 100px.</div>
<hr>
</body>
</html>
Si la propriété margin
a trois valeurs :
margin: 25px 50px 75px;
la marge supérieure est de 25 px
les marges droite et gauche sont de 50 px
la marge inférieure est de 75 px
Utilisez la propriété raccourcie margin avec trois valeurs :
p { margin: 25px 50px 75px;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 25px 50px 75px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>The margin shorthand property - 3 values</h2>
<div>This div element has a top margin of 25px, a right and left margin of 50px, and a bottom margin of 75px.</div>
<hr>
</body>
</html>
Si la propriété margin
a deux valeurs :
margin: 25px 50px;
les marges supérieure et inférieure sont de 25 px
les marges droite et gauche sont de 50 px
Utilisez la propriété raccourcie margin avec deux valeurs :
p { margin: 25px 50px;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 25px 50px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>The margin shorthand property - 2 values</h2>
<div>This div element has a top and bottom margin of 25px, and a right and left margin of 50px.</div>
<hr>
</body>
</html>
Si la propriété margin
a une valeur :
margin: 25px;
les quatre marges sont de 25 px
Utilisez la propriété raccourcie margin avec une valeur :
p {
margin: 25px;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 25px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>The margin shorthand property - 1 value</h2>
<div>This div element has a top, bottom, left, and right margin of 25px.</div>
<hr>
</body>
</html>
Vous pouvez définir la propriété margin sur auto
pour centrer horizontalement l'élément dans son conteneur.
L'élément occupera alors la largeur spécifiée et l'espace restant sera réparti à parts égales entre les marges gauche et droite.
Utiliser la marge : auto :
div {
width: 300px;
margin:
auto;
border: 1px solid red;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
</style>
</head>
<body>
<h2>Use of margin: auto</h2>
<p>You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:</p>
<div>
This div will be horizontally centered because it has margin: auto;
</div>
</body>
</html>
Cet exemple permet d'hériter de la marge gauche de l'élément
de l'élément parent (<div>) :
Utilisation de la valeur d'héritage :
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left:
inherit;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}
</style>
</head>
<body>
<h2>Use of the inherit value</h2>
<p>Let the left margin be inherited from the parent element:</p>
<div>
<p class="ex1">This paragraph has an inherited left margin (from the div element).</p>
</div>
</body>
</html>
Une propriété raccourcie pour définir toutes les propriétés de marge dans une seule déclaration
Définit la marge inférieure d'un élément
Définit la marge gauche d'un élément
Définit la marge droite d'un élément
Définit la marge supérieure d'un élément