Attribut block-size CSS

Définition et utilisation

block-size L'attribut spécifie la taille de l'élément dans la direction du bloc.

Attention :Les attributs CSS associés writing-mode Définit la direction du bloc, ce qui affecte block-size La direction du bloc est vers le bas et la direction en ligne est de gauche à droite pour les pages en anglais.

Les attributs de CSS block-size et inline-size Les attributs sont similaires à ceux de CSS width et height Les attributs sont très similaires, mais block-size et inline-size L'attribut dépend de la direction du bloc et de la direction en ligne.

Exemple

Exemple 1

Définir la taille de l'élément <div> dans la direction du bloc :

div {
  block-size: 200px;
}

Essayez-le vous-même

Exemple 2

Lorsque la valeur de l'attribut writing-mode de l'élément <div> est définie sur vertical-rl, la direction du bloc change de vertical à horizontal, ce qui change la direction d'action de l'attribut block-size :

div {
  block-size: 250px;
  writing-mode: vertical-rl;
}

Essayez-le vous-même

Syntaxe CSS

inset-block: auto|length|initial|inherit;

Valeur de l'attribut

Valeur Description
auto Par défaut. La valeur par défaut de block-size de l'élément.
length Définir block-size en unités telles que px, pt, cm, etc. Voir également :Unités CSS.
% Définir block-size en pourcentage de la taille de l'axe correspondant par rapport à l'élément parent.
initial Réinitialise cette propriété à sa valeur par défaut. Voir initial.
inherit Inherits this property from its parent element. Voir inherit.

Détails techniques

Valeur par défaut : auto
Héritabilité : Non
Création d'animation : Supporté. Voir :Propriétés liées aux animations.
Version : CSS3
Syntaxe JavaScript : object.style.blockSize="100px"

Support du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge cette propriété pour la première fois.

Chrome Edge Firefox Safari Opera
57.0 79.0 41.0 12.1 44.0

Pages associées

Tutoriel CSS :Hauteur et largeur CSS

Tutoriel CSS :Modèle de boîte CSS

Référence CSS :attribut height

Référence CSS :attribut width

Référence CSS :attribut writing-mode