margin-inline

Baseline Widely available *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨avril 2021⁩.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.

La propriété margin-inline définit la marge sur les côtés de l'élément qui sont ceux de l'axe en ligne. Cette propriété logique peut correspondre à différentes marges selon le mode d'écriture de l'élément, sa direction ou l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés margin-top et margin-bottom ou à margin-right et margin-left selon les valeurs des propriétés writing-mode, direction et text-orientation.

css

/* Valeurs de longueur */ /* Type <length> */ margin-inline: 10px 20px; /* Une longueur absolue */ margin-inline: 1em 2em; /* Une longueur relative à la taille du texte */ margin-inline: 5% 2%; /* Une longueur relative à la largeur ou hauteur du bloc englobant */ margin-inline: 10px; /* Une valeur utilisée pour les deux côtés */ /* Valeurs avec un mot-clé */ margin-inline: auto; /* Valeurs globales */ margin-inline: inherit; margin-inline: initial; margin-inline: unset;

Cette propriété est une propriété raccourcie pour les deux propriétés logiques margin-inline-start et margin-inline-end. Pour régler les marges selon l'axe en ligne, on pourra utiliser la propriété logique raccourcie margin-block qui correspond aux propriétés margin-block-start et margin-block-end.

Valeur initiale	pour chaque propriété individuelle de la propriété raccourcie : `margin-inline-start`: `0` `margin-inline-end`: `0`
Applicabilité	identique à `margin`
Héritée	non
Pourcentages	dépend du modèle en couches
Valeur calculée	pour chaque propriété individuelle de la propriété raccourcie : `margin-inline-start`: si spécifié par une longueur, la valeur absolue correspondante; si spécifié par un pourcentage, la valeur telle que spécifiée; sinon, `auto` `margin-inline-end`: si spécifié par une longueur, la valeur absolue correspondante; si spécifié par un pourcentage, la valeur telle que spécifiée; sinon, `auto`
Type d'animation	une longueur

Syntaxe formelle

margin-inline = 
 <'margin-top'>{1,2} 

<margin-top> = 
 <length-percentage> |
 auto |
 <anchor-size()> 

<length-percentage> = 
 <length> |
 <percentage> 

<anchor-size()> = 
 anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? ) 

<anchor-name> = 
 <dashed-ident> 

<anchor-size> = 
 width |
 height |
 block |
 inline |
 self-block |
 self-inline

Exemples

CSS

css

div { background-color: yellow; width: 120px; height: 120px; } .texteExemple { writing-mode: vertical-rl; margin-inline: 20px 40px; background-color: #c8c800; }

HTML

html

<div> <p class="texteExemple">Texte d'exemple</p> </div>

Résultat

Spécifications

Specification
CSS Logical Properties and Values Level 1 # propdef-margin-inline

Compatibilité des navigateurs

Voir aussi

Les propriétés physiques correspondantes : margin-top, margin-right, margin-bottom et margin-left
Les propriétés qui influencent les propriétés logiques writing-mode, direction, text-orientation

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨1 nov. 2025⁩ par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content