Margin-block - Astuces CSS | CSS Almanach 2025

margin-blockest une propriété abrégée en CSS qui définit un élément margin-block-startet des margin-block-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-block: 30px 60px; writing-mode: vertical-rl; /* Determines the block start direction */ )

Si le writing-modeest défini sur horizontal-lr, la margin-blockpropriété agira exactement comme le paramètre margin-topet margin-bottom. 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 du bloc.

Mais changez l'élément writing-modeen quelque chose comme vertical-lret le bord «inférieur» pivote dans le sens vertical, agissant plus comme les propriétés margin-leftet margin-right.

Syntaxe

margin-block: (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-blocksentirez très familier. La seule différence est que cela fonctionne dans deux directions au lieu de quatre.

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