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 janv. 1970⁩ par les contributeurs du MDN.

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