Les marginpropriétés CSS sont utilisées pour créer de l’espace autour des éléments, en dehors de toute bordure définie.
Avec CSS, vous avez un contrôle total sur les marges. Il existe des propriétés pour définir la marge de chaque côté d’un élément (en haut, à droite, en bas et à gauche).
Marge – Côtés individuels
CSS a des propriétés pour spécifier la marge de chaque côté d’un élément:
margin-topmargin-rightmargin-bottommargin-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 contenant
- 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.
Exemple
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;
}
Marge – propriété sténographique
Pour raccourcir le code, il est possible de spécifier toutes les propriétés de marge dans une propriété.
La marginpropriété est une propriété abrégée pour les propriétés de marge individuelle suivantes:
margin-topmargin-rightmargin-bottommargin-left
Alors, voici comment cela fonctionne:
Si la marginpropriété a quatre valeurs:
- marge: 25px 50px 75px 100px;
- la marge supérieure est de 25 pixels
- la marge droite est de 50 pixels
- la marge inférieure est de 75 pixels
- la marge gauche est de 100 pixels
Exemple
Utilisez la propriété de raccourci de marge avec quatre valeurs:
p {
margin: 25px 50px 75px 100px;
}
Si la marginpropriété a trois valeurs:
- marge: 25px 50px 75px;
- la marge supérieure est de 25 pixels
- les marges droite et gauche sont de 50 pixels
- la marge inférieure est de 75 pixels
Exemple
Utilisez la propriété de raccourci de marge avec trois valeurs: p {
margin: 25px 50px 75px;
}
Si la marginpropriété a deux valeurs:
- marge: 25px 50px;
- les marges supérieure et inférieure sont de 25 pixels
- les marges droite et gauche sont de 50 pixels
Exemple
Utilisez la propriété de raccourci de marge avec deux valeurs:
p {
margin: 25px 50px;
}
Si la marginpropriété a une valeur:
- marge: 25px;
- les quatre marges sont de 25 pixels
Exemple
Utilisez la propriété de raccourci de marge avec une valeur:
p {
margin: 25px;
}
La valeur automatique
Vous pouvez définir la propriété margin pour autocentrer horizontalement l’élément dans son conteneur.
L’élément prendra alors la largeur spécifiée et l’espace restant sera divisé également entre les marges gauche et droite.
Exemple
Utiliser la marge: auto:
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
La valeur héritée
Cet exemple laisse la marge gauche de l’élément <p class = « ex1 »> héritée de l’élément parent (<div>):
Exemple
Utilisation de la valeur héritée:
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}
Effondrement de la marge
Les marges supérieure et inférieure des éléments sont parfois regroupées en une seule marge égale à la plus grande des deux marges.
Cela ne se produit pas sur les marges gauche et droite! Seules les marges supérieure et inférieure!
Regardez l’exemple suivant:
Exemple
Démonstration de l’effondrement des marges:
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}
Dans l’exemple ci-dessus, l’élément <h1> a une marge inférieure de 50 pixels et l’élément <h2> a une marge supérieure définie sur 20 pixels.
Le bon sens semble suggérer que la marge verticale entre le <h1> et le <h2> serait au total de 70 pixels (50 pixels + 20 pixels). Mais en raison de l’effondrement de la marge, la marge réelle finit par être de 50 pixels.
Toutes les propriétés de marge CSS
| Property | Description |
|---|---|
| margin | Une propriété abrégée pour définir les propriétés de marge dans une déclaration |
| margin-bottom | Définit la marge inférieure d’un élément |
| margin-left | Définit la marge gauche d’un élément |
| margin-right | Définit la marge droite d’un élément |
| margin-top | Définit la marge supérieure d’un élément |