Margin-block-start - Astuces CSS

La margin-block-startpropriété en CSS définit la quantité d'espace le long du bord de départ extérieur 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-start: 25%; writing-mode: vertical-lr; )

Le bord de départ dans la direction du bloc est déterminé par l'élément writing-mode, directionet text-orientation. Ainsi, lors de l'utilisation margin-block-startdans un contexte horizontal de gauche à droite, il agit comme margin-topsi le bord de départ de l'élément est le haut de celui-ci.

Mais si nous changeons le writing-modeen, disons, vertical, l'élément pivote, plaçant le bord de départ vers la gauche. En conséquence, margin-block-startse comporte exactement comme margin-left. 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-start:

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-block-start: 20px; margin-block-start: 2rem; margin-block-start: 25%; /* Keyword values */ margin-block-start: auto; /* Global values */ margin-block-start: inherit; margin-block-start: initial; margin-block-start: unset;