CSS Marges

Cet élément a une marge de 70px.
Essayez-le vous-même »

Marges CSS

Les propriétés de marge CSS sont utilisées pour créer de l'espace autour des éléments, en dehors de toutes les bordures définies.

Les marges définissent la distance entre la bordure d'un élément et les éléments environnants.

Avec CSS, vous avez un contrôle total sur les marges. CSS dispose de propriétés pour définir la marge de chaque côté d'un élément (haut, droite, bas et gauche), ainsi qu'une propriété abrégée pour définir toutes les marges en une seule déclaration.

Marge - Côtés Individuels

CSS propose des propriétés pour spécifier la marge de chaque côté d'un élément :

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
  • inherit - spécifie que la marge doit être héritée de l'élément parent

Astuce : Les valeurs négatives sont également 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;
}
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 en une seule déclaration.

La margin propriété est une propriété abrégée pour les propriétés de marge individuelles suivantes :

Voici comment cela fonctionne :

Si la margin propriété a quatre valeurs :

  • margin: 25px 50px 75px 100px;
    • la marge supérieure est de 25px
    • la marge droite est de 50px
    • la marge inférieure est de 75px
    • la marge gauche est de 100px

Exemple

Utilisez la propriété abrégée de marge avec quatre valeurs :

p {
margin: 25px 50px 75px 100px;
}
Essayez-le vous-même »

Si la margin propriété a trois valeurs :

  • margin: 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 de marge avec trois valeurs :

p {
margin: 25px 50px 75px;
}
Essayez-le vous-même »

Si la margin propriété a deux valeurs :

  • margin: 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 de marge avec deux valeurs :

p {
margin: 25px 50px;
}
Essayez-le vous-même »

Si la margin propriété a une valeur :

  • margin: 25px;
    • toutes les marges sont de 25px

Exemple

Utilisez la propriété abrégée de marge avec une valeur :

p {
margin: 25px;
}
Essayez-le vous-même »

La valeur auto

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 réparti également entre les marges gauche et droite.

Exemple

Utilisez margin: auto :

div {
width: 300px;
margin: auto;
border: 1px solid red;
}
Essayez-le vous-même »

La valeur inherit

Vous pouvez définir la propriété margin sur inherit pour que la marge soit héritée de l'élément parent.

Cet exemple permet à la marge gauche de l'élément <p class="ex1"> d'être héritée de l'élément parent (<div>):

Exemple

Utilisation de la valeur inherit :

div {
border: 1px solid red;
margin-left: 100px;
}

p.ex1 {
margin-left: inherit;
}
Essayez-le vous-même »

Toutes les propriétés de marge CSS

Propriété Description
margin Une propriété abrégée pour définir toutes les propriétés de marge en une seule 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