Marges CSS
Les marges sont utilisées pour créer de l'espace autour des éléments, en dehors de toute bordure définie.
Marges CSS
Les propriétés CSS marginsont 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
Astuce : 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é 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é.
La marginproprié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 marginproprié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 {
margin: 25px 50px 75px 100px;
}
Si la marginproprié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 {
margin: 25px 50px 75px;
}
Si la marginproprié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 {
margin: 25px 50px;
}
Si la marginproprié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 {
margin: 25px;
}
La valeur automatique
Vous pouvez définir la propriété margin sur autopour 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 {
width: 300px;
margin:
auto;
border: 1px solid red;
}
La valeur d'héritage
Cet exemple permet d'hériter de la marge gauche de l'élément <p class="ex1"> de l'élément parent (<div>) :
Exemple
Utilisation de la valeur d'héritage :
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left:
inherit;
}