Les propriétés margin, margin-left, margin-top, etc.

Description de la propriété margin.

margin définit la taille des marges, c'est à dire l'espace réservé tout autour de l'élément, à l'extérieur de sa bordure. Ne pas confondre avec les marges intérieures qui sont gérées par la propriété padding.

• margin-top : marge du haut.
• margin-right : marge de droite.
• margin-bottom : marge du bas.
• margin-left : marge de gauche.
• margin-start : marge au début de l'élément, compte-tenu de la direction d'écriture.
• margin-end : marge à la fin de l'élément, compte-tenu de la direction d'écriture.

Les deux dernières valeurs sont intéressantes pour les langues non européennes. La direction d'écriture est définie par la propriété direction. Pour les langues européennes, margin-start est équivalent à margin-left, et margin-end est équivalent à margin-right.

Les marges sont comptées à partir de l'élément parent si l'élément est fils unique (pas d'autres éléments dans c e parent), ou à partir des éléments précédent et suivant lorsqu'il y a d'autres éléments dans le parent.

Fusion des marges.

Les marges haute et basse entre les blocs successifs ne s'ajoutent pas : le navigateur applique celle des marges qui est la plus grande. Ce mécanisme de fusion ne se produit que pour les marges dans le sens vertical : si des blocs sont affichés côte à côte, leurs marges gauche et droite ne fusionnent pas.

Reportez-vous également à la propriété margin-trim pour des compléments d'information sur la gestion des marges entre éléments du même type.

Centrage d'un élément du type block.

Lorsque les marges droite et gauche sont fixées à la valeur auto, elles ont pour conséquence le centrage de l'élément dans la largeur de son parent.

Langues non européennes.

Si du texte en langue arabe ou CJK est envisagé, il vaut mieux raisonner avec les propriétés suivantes même si ça ne change rien pour la propriété raccourcie qui liste de toute façon les quatre valeurs.

• margin-block-start : marge au début du bloc, équivalente à margin-top pour les langues européennes.
• margin-block-end : marge à la fin du bloc, équivalente à margin-bottom pour les langues européennes.
• margin-inline-start : marge au début des lignes, équivalente à margin-left pour les langues européennes.
• margin-inline-end : marge en fin des lignes, équivalente à margin-right pour les langues européennes.

Syntaxes pour margin.

• margin: auto;

  Valeur par défaut. Les marges sont déterminées par le navigateur. Elles peuvent être différentes suivant le type d'élément (p, div...).
  Particularité : lorsque les marges droite et gauche sont fixées toutes les deux à la valeur auto, elles ont pour conséquence le centrage horizontal de l'élément. Cette particularité n'est pas valable dans le sens vertical.

• margin: 15px 10px 10px 0px; a b c d

  De un à quatre nombres qui définissent la taille des marges.

  Ce sont des nombres positifs ou négatifs, suivis d'une unité de dimension (voir les unités de dimensions en CSS) et séparés par des espaces.
  Remarque : les valeurs négatives peuvent décaler l'élément en dehors de la zone visible.

  Les pourcentages sont calculés par rapport à la largeur du parent, ce qui est logique pour les marges horizontales (margin-left et margin-right), mais peut surprendre dans le cas des marges verticales (margin-top et margin-bottom).
  Calculer les marges verticales par rapport à la hauteur de l'élément parent conduirait à un calcul circulaire insoluble. En effet, la hauteur d'un bloc est déterminée par son contenu (à moins qu'elle ne soit fixée avec la propriété height). Or la hauteur du contenu dépend des marges des éléments internes. Si celles-ci dépendaient également de la hauteur du parent on aurait un gros problème de calcul circulaire.

  En fait l'utilisation de pourcentages pour les marges verticales est généralement peu intéressante.

  Voici comment sont attribuées les valeurs en fonction du nombre de valeurs indiquées :

  1. Si une seule valeur est précisée, elle s'applique aux quatre marges.
  2. Si deux valeurs sont précisées,
         - la première définit les marges haute et basse,
         - la deuxième valeur définit les marges gauche et droite.
  3. Lorsque trois valeurs sont indiquées, elle définissent
         - la marge du haut,
         - les marges gauche et droite,
         - la marge du bas.
  4. Enfin, si les quatre valeurs sont précisées, elles définissent chacune des marges, dans l'ordre suivant :
         - marge du haut,
         - marge de droite,
         - marge du bas,
         - marge de gauche.
  
  margin:a;
  Une seule valeur.

  
  margin:a b;
  Deux valeurs.

  
  margin:a b c;
  Trois valeurs.

  
  margin:a b c d;
  Quatre valeurs.
• margin: inherit | initial | unset;

  Reportez-vous à la description générale de ces valeurs.

Voir aussi...

Dimensions et marges des blocs - Propriétés.

• box-sizing : Mode de calcul des dimensions de blocs.
• height : Hauteur de l'élément.
• margin-bottom : Marge du bas.
• margin-left : Marge de gauche.
• margin-right : Marge de droite.
• margin-top : Marge du haut.
• max-height : Hauteur maxi.
• max-width : Largeur maxi.
• min-height : Hauteur mini.
• min-width : Largeur mini.
• padding : Marges intérieures des quatre cotés.
• width : Largeur de l'élément.