Propriété inline-size CSS

Page précédente initial-letter
Page suivante inset

Définition et utilisation

inline-size L'attribut spécifie la taille de l'élément dans la direction en ligne.

Remarque :Les propriétés CSS associées writing-mode Définit la direction en ligne, ce qui affecte inline-size Pour les pages en anglais, la direction en ligne va de gauche à droite, tandis que la direction en bloc va vers le bas.

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

Exemple

Exemple 1

Définir la taille de l'élément <div> dans la direction en ligne :

div {
  inline-size: 200px;
}

Essayez-le vous-même

Exemple 2

lorsque l'élément <div> writing-mode la valeur de l'attribut est définie comme vertical-rl lorsque, la direction en ligne change de horizontal à vertical vers le bas, ce qui affecte inline-size Fonctionnement de l'attribut :

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

Essayez-le vous-même

Syntaxe CSS

inline-size: auto|length|initial|inherit;

Valeur de l'attribut

Valeur	Description
auto	Valeur par défaut. Valeur par défaut inline-size de l'élément.
length	Spécifier la taille de la direction en ligne, en unités de px, pt, cm, etc. Les valeurs négatives sont autorisées. Voir :Unités CSS.
%	Spécifier un pourcentage de la taille de l'axe correspondant par rapport à l'élément parent.
initial	Régler 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
Réalisation d'animation :	Supporté. Voir :Propriétés liées aux animations.
Version :	CSS3
Syntaxe JavaScript :	object.style.inlineSize="250px"