Marge CSS
Les marges sont utilisées pour créer de l’espace autour des éléments, en dehors de toute bordure définie.
Cet élément a une marge de 70px.
Essayez-le vous-même »
Marges CSS
Le CSS margin Les propriétés 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 permettant de définir la marge de chaque côté d’un élément (haut, droite, 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 {
marge supérieure : 100px ;
marge inférieure : 100px ;
marge droite : 150px ;
marge gauche : 80px ;
}
Essayez-le vous-même »
Marge – Propriété abrégée
Pour raccourcir le code, il est possible de spécifier toutes les propriétés de marge dans une seule propriété.
Le margin propriété est une propriété abrégée pour les propriétés de marge individuelles suivantes :
margin-topmargin-rightmargin-bottommargin-left
Alors, voici comment cela fonctionne :
Si la margin propriété a quatre valeurs :
- marge : 25px 50px 75px 100px ;
- la marge supérieure est de 25px
- la marge de droite est de 50px
- la marge inférieure est de 75px
- la marge de gauche est de 100px
Exemple
Utilisez la propriété abrégée margin avec quatre valeurs :
p {
marge : 25px 50px 75px 100px ;
}
Essayez-le vous-même »
Si la margin propriété a trois valeurs :
- marge : 25px 50px 75px ;
- la marge supérieure est de 25px
- les marges droite et gauche sont de 50px
- la marge inférieure est de 75px
Exemple
Utilisez la propriété abrégée margin avec trois valeurs :
p {
marge : 25px 50px 75px ;
}
Essayez-le vous-même »
Si la margin propriété a deux valeurs :
- marge : 25px 50px ;
- les marges supérieure et inférieure sont de 25px
- les marges droite et gauche sont de 50px
Exemple
Utilisez la propriété abrégée margin avec deux valeurs :
p {
marge : 25px 50px ;
}
Essayez-le vous-même »
Si la margin propriété a une valeur :
- marge : 25px ;
- les quatre marges sont de 25px
Exemple
Utilisez la propriété abrégée margin avec une valeur :
p {
marge : 25px ;
}
Essayez-le vous-même »
La valeur automatique
Vous pouvez définir la propriété margin sur auto pour centrer 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 marge : auto :
div {
largeur : 300 pixels ;
marge : automatique ;
bordure : 1 pixel rouge uni ;
}
Essayez-le vous-même »
La valeur d’héritage
Cet exemple permet d’hériter de la marge gauche de l’élément
de l’élément parent (
Exemple
Utilisation de la valeur d’héritage :
div {
bordure : 1 pixel rouge uni ;
marge gauche : 100px ;
}
p.ex1 {
marge-gauche : hériter ;
}
Essayez-le vous-même »
Toutes les propriétés de marge CSS
| Propriété | Description |
|---|---|
| marge | Une propriété abrégée pour définir toutes les propriétés de marge dans une seule déclaration |
| marge inférieure | Définit la marge inférieure d’un élément |
| marge-gauche | Définit la marge gauche d’un élément |
| marge droite | Définit la marge droite d’un élément |
| marge supérieure | Définit la marge supérieure d’un élément |
#Marge #CSS