Margin-block-end - Astuces CSS

La margin-block-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 du bloc. Il est inclus dans la spécification CSS Logical Properties Level 1, qui est actuellement en version préliminaire.

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

L'arête de fin dans la direction du bloc est déterminée par l'élément writing-mode, directionet text-orientation. Ainsi, lors de l'utilisation margin-block-enddans un contexte horizontal de gauche à droite, il agit comme margin-bottomsi le bord de départ de l'élément est le bas de celui-ci.

Mais si nous changeons le writing-modeen, disons, vertical, l'élément pivote, plaçant le bord final vers la droite. En conséquence, margin-block-endse comporte exactement comme margin-right. 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-block-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-end accepte une seule longueur ou valeur de mot-clé.

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