Margin - Propriété CSS

Schéma syntaxique de margin..

Description des termes utilisés sur le schéma :

• length est une valeur numérique suivie d'une des unités de dimension ou un pourcentage.

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 est une propriété résumée qui permet de définir en une seule écriture les valeurs des quatre marges, soit les propriétés :

• margin-top : marge du haut.
• margin-right : marge de droite.
• margin-bottom : marge du bas.
• margin-left : marge de gauche.

margin accepte de 1 à 4 valeurs, mais dans tous les cas, les quatre marges sont modifiées : même si une seule valeur est spécifiée, elle sera appliquée aux quatre marges (voir les détails de syntaxe plus loin).

Les marges sont comptées à partir de l'élément parent si l'élément est fils unique (pas d'autres éléments dans ce 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.

Si les marges s'ajoutaient

Avec la fusion des marges

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.

Prise en charge de la langue.

Si du texte en langue non latine est envisagé (arabe ou CJK par exemple), il vaut mieux raisonner avec les propriétés dites "logiques", c'est à dire celles qui prennent en compte la direction et le sens d'écriture. Par exemple, les langues arabes s'écrivent de la droite vers la gauche, ce qui est le contraire des langues latines (européennes) qui s'écrivent de la gauche vers la droite. Les propriétés logiques relatives aux marges sont les suivantes :

• 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.

Il faut ajouter deux propriétés résumées :

• margin-block : accepte deux valeurs qui correspondent à margin-block-start et à margin-block-end.
• margin-inline : accepte deux valeurs qui correspondent à margin-inline-start et à margin-inline-end.

Remarque : la propriété résumée margin ne traite que les marges physiques : son effet sera donc indépendant de la direction et du sens d'écriture.

Le simulateur ci-dessous donne les équivalences pour les principales familles de langues.

Valeurs pour margin.

• margin: auto;

  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 dimension) 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: initial; (0) margin: inherit; margin: revert; margin: revertLayer; margin: unset;

  Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, unset.

Animation de la propriété margin.

L'animation des marges est souvent utilisées pour donner l'impression d'un bloc qui se déplace sur l'écran.

Manipulation de la propriété margin par programme.

Les codes donnés ci-après sont donnés pour margin-top mais seront facilement modifiables pour s'adapter aux autres propriétés relatives aux marges.

Avec Javascript, modifier la valeur de margin.

Javascript accepte deux syntaxes pour modifier la valeur de margin-top. La première syntaxe utilise la notation typique de CSS (le kebab-case : un tiret pour séparer les mots), tandis que la deuxième syntaxe est plus proche de la syntaxe habituelle de Javascript, avec la notation en camel-case (une majuscule pour séparer les mots).

let el = document.getElementById('id'); el.style['margin'] = '2cm'; // ou let el = document.getElementById('id'); el.style.margin = '2cm';

Avec Javascript, lire la valeur de margin.

Relire la valeur de margin-top en Javascript peut également se faire suivant deux syntaxes. La propriété doit avoir été affectée directement à l'élément lui-même par son attribut style et non pas à une classe ou via un autre sélecteur CSS.

let el = document.getElementById('id'); let value = el.style['margin']; // ou let el = document.getElementById('id'); let value = el.style.margin;

Avec Javascript, lire la valeur calculée de margin.

Pour lire la valeur calculée de margin-top, utilisez le code suivant. La marge est retournée en pixels ou en pourcentages, quelque soit l'unité qui a été utilisée pour la définir dans la feuille de styles.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('margin');

Avec JQuery, modifier la valeur de margin.

Avec JQuery, deux syntaxes sont également possibles pour modifier la valeur de la propriété margin-top de l'élément el :


$('#id').css('margin', '2cm');


Avec JQuery, lire la valeur calculée de margin.

Comme en Javascript, la marge est retournée en pixels ou en pourcentages.

let value = $('#id').css('margin');

Testez vous-même.

Les boutons ci-dessous affichent soit la valeur telle qu'elle a été appliquée pour le premier bouton, soit la valeur calculée pour le deuxième bouton. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de margin. On constate en particulier que les pourcentages sont bien mémorisés en tant que pourcentages (voir le chapitre sur l'héritage). Toutes les autres unités sont converties en pixels.

Simulateur avec la propriété margin.

Le simulateur ci-dessous vous aidera à vous familiariser avec la notion de début de bloc, début de ligne, etc. en fonction de la langue. Les marges sont matérialisées en bleu.

Prise en charge de margin par les navigateurs.

margin est sans doute une des propriétés les plus anciennes de CSS : elle est reconnue par tous les navigateurs. Les propriétés logiques (prenant en compte le mode d'écriture de la langue) sont plus récentes mais sont maintenant bien reconnues également.

1

Propriété
margin

2

Propriété
margin-inline

3

Propriété
margin-block

Estimation de la prise en charge globale.

97%

95%

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

QQ Browser

Safari sur IOS

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Opéra

Safari

Firefox

Chrome pour Androïd

Samsung Internet

Chrome

Edge

Androïd Brower

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Caniuse

Prise en charge de margin par les navigateurs.

La définition des marges était déjà prévue dans la toute première spécification de langage CSS. Elle a peu évolué depuis. La plus grosse modification est l'ajout des propriétés logiques, qui prennent en compte le mode d'écriture en fonction de la langue margin-block..., et margin-inline....

• CSS 1 - Spécification concernant les feuilles de styles en cascade - Version 1

  Première spécification du langage CSS.
  Première définition de la propriété margin et des propriétés détaillées pour chacun des bords.
  

  17 Novembre 1995

  Document de travail.

  

  12 Novembre 1996

  Proposé à la recommandation.

  

  17 Décembre 1996

  Recommandation.

  

  13 Septembre 2018

  Ancienne spécification, déclarée obsolète.

• CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

  Modification du calcul des marges lorsqu'elles sont exprimées en pourcentages.
  La valeur inherit est acceptée pour les marges.
  

  04 Novembre 1997

  Document de travail.

  

  24 Mars 1998

  Proposé à la recommandation.

  

  11 Mai 1998

  Recommandation.

• Module CSS - Modèle de blocs - Niveau 3

  Précision concernant le calcul des marges dans le cas d'une annotation ruby.
  

  26 Juillet 2001

  Document de travail.

  

  22 Décembre 2020

  Candidat à la recommandation.

  

  16 Février 2023

  Proposé à la recommandation.

  

  06 Avril 2023

  Recommandation.

• Module CSS - Propriétés et valeurs logiques - Niveau 1

  Introduction des propriétés logiques (dépendantes du mode d'écriture) pour définir les marges.
  

  18 Mai 2017

  Document de travail.

  

  

  

• Module CSS - Modèle de blocs - Niveau 4

  Pas de modification sur les propriétés margin... elles mêmes, mais ajout de la propriété margin-trim qui interagit dans le calcul des marges.
  

  21 Avril 2020

  Document de travail.

  

  

  

Voir aussi, au sujet du calcul des marges.

Les marges (intérieures et extérieures) sont décrites dans ce module de la spécification CSS : CSS Box Model Module. Les définitions suivantes sont également décrites dans ce même module.

Propriétés :