Margin-inline - Astuces CSS | CSS Almanach 2025

margin-inlineest une propriété abrégée en CSS qui définit un élément margin-inline-startet des margin-inline-endvaleurs, qui sont tous deux des propriétés logiques. Il crée un espace autour de l'élément dans la direction en ligne, qui est déterminé par l'élément de writing-mode, directionet text-orientation.

La propriété fait partie de la spécification CSS Logical Properties and Values Level 1 qui est actuellement à l'état Brouillon de l'éditeur. Cela signifie que la définition et les informations à ce sujet peuvent changer entre maintenant et la recommandation officielle.

.element ( margin-inline: 60px auto; writing-mode: vertical-rl; /* Determines the inline start direction */ )

Si le writing-modeest défini sur horizontal-lr, la margin-inlinepropriété agira exactement comme le paramètre margin-leftet margin-right. Un aspect intéressant de cette propriété est qu'il s'agit de l'une des propriétés logiques qui n'a pas de carte un-à-un avec une propriété non logique. Il n'existe aucune propriété plus ancienne qui définit à la fois (et uniquement) les marges de direction en ligne.

Mais changez les éléments writing-modeen quelque chose comme vertical-lret les bords «en ligne» sont tournés dans la direction verticale, agissant plus comme les propriétés margin-topet margin-bottom.

Syntaxe

margin-inline: (1,2)

C'est un peu bizarre de voir la syntaxe d'une propriété référencer la syntaxe d'une autre propriété CSS directement dans la documentation, mais c'est vraiment ce que c'est. Ce qu'il essaie de dire, c'est que la propriété accepte les mêmes valeurs que margin-top(jusqu'à deux fois) qui suit cette syntaxe:

margin-top: | | auto;

Valeur initiale: 0
S'applique à: tous les éléments à l'exception des éléments de table internes, des conteneurs de base ruby et des conteneurs d'annotation ruby
Héritée: non
Pourcentages: comme pour la propriété physique correspondante
Valeur calculée: identique aux margin-*propriétés correspondantes
Type d'animation: par type de valeur calculée

Valeurs

Si vous connaissez la marginpropriété sténographique, vous vous margin-inlinesentirez très familier. La seule différence est que cela fonctionne dans deux directions au lieu de quatre.

/* Length values */ margin-inline: 20px 40px; margin-inline: 2rem 4rem; margin-inline: 25% 15%; margin-inline: 20px; /* a single value sets both values */ /* Keyword values */ margin-inline: auto; /* Global values */ margin-inline: inherit; margin-inline: initial; margin-inline: unset;