Propriété CSS `margin-inline`

Baseline Large disponibilité *

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.

En savoir plus
Voir la compatibilité complète

La propriété raccourcie CSS margin-inline est une propriété raccourcie qui définit à la fois les marges logiques de début et de fin en ligne d'un élément, lesquelles correspondent à des marges physiques selon le mode d'écriture, la direction et l'orientation du texte de l'élément.

Exemple interactif

margin-inline: 5% 10%;
writing-mode: horizontal-tb;

margin-inline: 10px 40px;
writing-mode: vertical-rl;

margin-inline: 5% 10%;
writing-mode: horizontal-tb;
direction: rtl;

<section id="default-example">
 <div id="container">
 <div class="col">Un</div>
 <div class="col transition-all" id="example-element">Deux</div>
 <div class="col">Trois</div>
 </div>
</section>

#container {
 width: 300px;
 height: 200px;
 display: flex;
 align-content: flex-start;
 justify-content: flex-start;
}
.col {
 width: 33.33%;
 border: solid #ce7777 10px;
 background-color: #2b3a55;
 color: white;
 flex-shrink: 0;
}
#example-element {
 border: solid 10px #ffbf00;
 background-color: #2b3a55;
 unicode-bidi: bidi-override;
}

Propriétés constitutives

Cette propriété est une propriété raccourcie pour les propriétés CSS suivantes :

Syntaxe

css

/* Valeurs de 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 */
margin-inline: anchor-size(width);
margin-inline: calc(anchor-size(self-block) / 5) auto;
/* Valeurs avec un mot-clé */
margin-inline: auto;
/* Valeurs globales */
margin-inline: inherit;
margin-inline: initial;
margin-inline: revert;
margin-inline: revert-layer;
margin-inline: unset;

Cette propriété correspond aux propriétés margin-top et margin-bottom, ou aux propriétés margin-right et margin-left, selon les valeurs définies pour writing-mode, direction et text-orientation.

La propriété margin-inline peut être définie avec une ou deux valeurs.

Avec une valeur, la même marge s'applique au début et à la fin.
Avec deux valeurs, la première marge s'applique au début, la seconde à la fin.

Valeurs

La propriété margin-inline peut prendre les mêmes valeurs que la propriété margin-top.

Définition formelle

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 défini par une longueur, la valeur absolue correspondante ; si défini par un pourcentage, la valeur telle que définie; sinon, `auto` `margin-inline-end`: si défini par une longueur, la valeur absolue correspondante ; si défini par un pourcentage, la valeur telle que définie; 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

Définir les marges de début et de fin en ligne

HTML

html

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

CSS

css

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