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 ⁨3 août 2023⁩ par les contributeurs du MDN.

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