Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

Les propriétés relatives aux marges
margin, margin-left, margin-top, margin-inline-start, etc.

margin

Résumé des caractéristiques de la propriété margin

Description rapide
Résumé des quatre marges.
Statut
Standard
Type de valeur
Dimension {1-4}
Valeurs prédéfinies
auto
Pourcentages
Calculés par rapport à la largeur du bloc parent.
Valeur initiale
0
Héritée par défaut
Non
Type d'animation
Computed value : lors d'une animation, la propriété margin passe progressivement d'une valeur à une autre.
Module W3C
Module CSS - Modèle de blocs
Références (W3C)
 🡇  
 🡅  
Statut du document:: WD (document de travail)

Statut du document:: CR (document proposé pour la recommandation)

Statut du document:: WD (document de travail)

Statut du document:: Ancienne norme, obsolète

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é raccourcie 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.

Les marges en CSS   Les marges en CSS

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.

Fusion des marges en CSS

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 des langues non latines.

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 raccourcies :

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

   

margin-top
margin-left
La direction et le sens d'écriture de ce texte s'adap­tent à la langue choisie.
margin-right
margin-bottom

Syntaxes 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 CSS 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.
    Propriété margin avec une seule valeur
    margin:a;
    Une seule valeur.
    Propriété margin avec deux valeurs
    margin:a b;
    Deux valeurs.
    Propriété margin avec trois valeurs
    margin:a b c;
    Trois valeurs.
    Propriété margin avec quatre valeurs
    margin:a b c d;
    Quatre valeurs.
  • margin: initial; margin: inherit; margin: revert; margin: revert-layer; margin: unset;

    La valeur initiale est : 0.

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.

Démonstration

Manipulation des marges 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. Le paramètre el représente l'élément de la page sur lequel on souhaite travailler.

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


function setMarginTop(el) {
el.style['margin-top']='120px';
}
ou

function setMarginTop(el) {
el.style.marginTop='120px';
}

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


function getMarginTop(el) {
return el.style['margin-top'];
}
ou

function getMarginTop(el) {
return el.style.marginTop;
}

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


function getMarginTop(el) {
return window.getComputedStyle(el).getPropertyValue('margin-top');
}

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


function setMarginTop(el) {
$(el).css('margin-top','120px');
}
ou

function setMarginTop(el) {
$(el).css('marginTop','120px');
}

Deux syntaxes aussi pour lire la valeur calculée de la propriété margin-top. Comme en Javascript, la marge est retournée en pixels.


function getMarginTop(el) {
return $(el).css('margin-top');
}
ou

function getMarginTop(el) {
return $(el).css('marginTop');
}

Simulateur.

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.


Mode d'écriture :

margin-block-start :
margin-block-end :
margin-inline-start :
margin-inline-end :

Voici comment on parle des marges dans les manuels de typographie traditionnelle.

« Les marges sont un fondement esthétique de la mise en pages, qui ancre la place du texte en le cerclant d’un espace silencieux. Elles font ressortir le texte pour lui donner toute son épaisseur et installent une quiétude propice à la lecture. Les marges ont aussi un rôle ergonomique ; les grands fonds permettent aux pouces de se poser, les petits fonds évitent au texte d’aller se perdre dans la reliure. »

Prise en charge par les navigateurs (compatibilité).

est sans doute une des propriétés les plus anciennes de CSS : elle est reconnue par tous les navigateurs. Attention cependant, depuis l'introduction des propriétés et valeurs logiques, certains navigateurs sont à la traîne pour les traitements dépendant de la direction et du sens d'écriture.

Colonne 1
Support de la propriété margin. Bien entendu, aucun problème : cette propriété existe depuis la toute première version de CSS.
Colonne 2 et 3
Support des propriétés logiques margin-inline et margin-block qui agissent en fonction du sens et de la direction d'écriture de la langue utilisée.
1
margin
2
margin-inline
3
margin-block
Estimation de la prise en charge en pourcentage du parc actuel.
97%
91%
91%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

Opéra

Opéra Mobile

Safari

Safari sur IOS

Samsung Internet

Voir aussi, dans le même module de standardisation que margin.

Les spécifications CSS éditées par le W3C sont organisées en modules. margin fait partie du Module CSS - Modèle de blocs (CSS Box Model Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Définit la marge après le bloc, compte-tenu du sens d'écriture.
Définit la marge avant le bloc, compte-tenu du sens d'écriture.
Marge du bas.
Définit la marge après la fin de ligne, compte-tenu du sens d'écriture.
Définit la marge avant le début des lignes de texte, compte-tenu du sens d'écriture.
Marge de gauche.
Marge de droite.
Marge du haut.
Définit la gestion des marges successives au sein d'un même container.
Marges intérieures des quatre cotés.
Définit la maarge intérieure à la fin du bloc, compte-tenu du sens d'écriture.
Définit la marge intérieure au début du bloc, compte-tenu du sens d'écriture.
Marge intérieure en bas.
Définit la marge intérieure du côté de la fin des lignes de texte, compte-tenu du sens d'écriture.
Définit la marge intérieure du côté du début des lignes de texte, compte-tenu du sens d'écriture.
Marge intérieure à gauche.
Marge intérieure à droite.
Marge intérieure en haut.