Margin-inline-end - Astuces CSS

La margin-inline-endpropriété en CSS définit la quantité d'espace le long du bord extérieur de fin d'un élément dans la direction en ligne. Il est inclus dans la spécification CSS Logical Properties Level 1, qui est actuellement en version préliminaire.

.element ( margin-inline-end: 25%; writing-mode: vertical-lr; )

L'arête de fin dans la direction en ligne est déterminée par les éléments writing-mode, directionet text-orientation. Ainsi, lors de l'utilisation margin-inline-enddans un contexte horizontal de gauche à droite, il agit comme margin-rightsi le bord de fin de l'élément est le côté droit.

Mais si nous changeons le writing-modeen, disons, vertical, l'élément est tourné dans le sens des aiguilles d'une montre, plaçant le bord final vers le bas. En conséquence, margin-inline-endse comporte exactement comme margin-bottom. Fondamentalement, le bord de départ est relatif à la direction dans laquelle il s'écoule. C'est ce que nous voulons dire quand on parle de propriétés «logiques».

Syntaxe

margin-inline-end:

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 celles margin-topqui suivent 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

margin-block-start accepte une seule longueur ou valeur de mot-clé.

/* Length values */ margin-inline-end: 20px; margin-inline-end: 2rem; margin-inline-end: 25%; /* Keyword values */ margin-inline-end: auto; /* Global values */ margin-inline-end: inherit; margin-inline-end: initial; margin-inline-end: unset;