Marge CSS

La marge de cet élément est de 70px.

Essayer vous-même

Marge CSS

CSS marge L'attribut est utilisé pour créer de l'espace autour de l'élément à l'extérieur de toute bordure définie.

Avec CSS, vous pouvez contrôler entièrement les marges. Il existe certains attributs qui peuvent être utilisés pour définir la marge de chaque côté (haut, droite, bas et gauche) de l'élément.

Marge - Côté individuel

CSS possède des propriétés pour spécifier la marge de chaque côté de l'élément :

  • marge-haut
  • marge-droite
  • marge-bas
  • marge-gauche

Toutes les propriétés des marges extérieures peuvent définir les valeurs suivantes :

  • auto - Le navigateur calcule la marge
  • longueur - Spécifiez la marge en unités telles que px, pt, cm, etc.
  • % - Spécifiez la marge en pourcentage de la largeur de l'élément englobant
  • hérité - Spécifiez 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 de l'élément <p> :

p {
  marge-haut : 100px;
  marge-bas : 100px;
  marge-droite : 150px;
  marge-gauche : 80px;
}

Essayer vous-même

Marge - Abréviation de propriété

Pour réduire le code, vous pouvez spécifier toutes les propriétés des marges extérieures dans une seule propriété.

marge La propriété est une abréviation des propriétés des marges extérieures suivantes :

  • marge-haut
  • marge-droite
  • marge-bas
  • marge-gauche

Le principe de fonctionnement est le suivant :

Si marge La propriété a quatre valeurs :

  • marge : 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

L'abréviation de propriété marge définit quatre valeurs :

p {
  marge : 25px 50px 75px 100px;
}

Essayer vous-même

Si marge La propriété a défini trois valeurs :

  • marge : 25px 50px 75px;
    • La marge supérieure est de 25px
    • La marge droite et gauche est de 50px
    • La marge inférieure est de 75px

Exemple

Utilisez l'abréviation de propriété marge pour définir trois valeurs :

p {
  marge : 25px 50px 75px;
}

Essayer vous-même

Si marge La propriété a défini deux valeurs :

  • marge : 25px 50px;
    • La marge supérieure et inférieure est de 25px
    • La marge droite et gauche est de 50px

Exemple

Utilisez l'abréviation de propriété marge pour définir deux valeurs :

p {
  marge : 25px 50px;
}

Essayer vous-même

Si marge La propriété a défini une valeur :

  • marge : 25px;
    • Tous les quatre marges extérieures sont de 25px

Exemple

Utilisez l'abréviation de propriété marge pour définir une valeur :

p {
  marge : 25px;
}

Essayer vous-même

auto 值

Vous pouvez définir la propriété margin sur autopour centrer horizontalement l'élément dans son conteneur.

Ensuite, l'élément occupera la largeur spécifiée et l'espace restant sera réparti uniformément entre les bords gauche et droit.

Exemple

Utilisation margin: auto:

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}

Essayer vous-même

Valeur inherit

Dans cet exemple, la marge extérieure gauche de l'élément <p class="ex1"> est 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;
}

Essayer vous-même

Lecture complémentaire

Livres de complément :Modèle de boîte : marge extérieure CSS