Propriété CSSModèle de boîte

inline-size

Définit la taille d’un élément le long de la ligne de texte. En écriture horizontale, c’est la largeur, et sa paire block-size définit la hauteur.

Valeur initiale: auto
Héritée: Non
Animable: oui, en tant que longueur ou pourcentage
S’applique à: tous les éléments sauf les éléments en ligne non remplacés (par exemple span), les lignes de tableau et les groupes de lignes
JavaScript: element.style.inlineSize = "320px"

Sur cette page

Exemple
Définition et utilisation
Syntaxe
Valeurs
Valeurs en pratique
Compatibilité des navigateurs
Bonnes pratiques
Entrées associées

Exemple

CSS

.card {
  inline-size: min(100%, 280px);
  padding: 12px;
  border-radius: 14px;
  background: #18181b;
}

.card img {
  display: block;
  inline-size: 100%;
  block-size: 120px;
  object-fit: cover;
  border-radius: 10px;
}

HTML de l’exemple

<article class="card">
  <img src="/collections/covers/kurs-html-css-od-podstaw.webp" alt="" width="1536" height="1024">
  <strong style="display: block; margin-top: 8px;">Cours HTML et CSS</strong>
  <small style="color: #a1a1aa;">11 modules · 738 tâches</small>
</article>

Aperçu

Définition et utilisation

La propriété inline-size est l’équivalent logique de width. Elle définit la taille d’un élément sur l’axe en ligne, c’est-à-dire dans le sens où le texte s’écoule sur une ligne. Dans un texte horizontal classique, c’est simplement la largeur, et les deux propriétés produisent le même résultat.

Sa paire, block-size, définit la taille sur l’axe de bloc, le long duquel s’empilent les paragraphes successifs. En écriture horizontale, c’est la hauteur. Dès qu’un élément reçoit writing-mode: vertical-rl, les rôles s’inversent : inline-size contrôle la hauteur, et block-size la largeur.

Les deux ont des versions avec contraintes : min-inline-size, max-inline-size, min-block-size et max-block-size. Elles fonctionnent comme min-width, max-width et leurs équivalents verticaux. Toutes acceptent les mêmes valeurs que width : auto, des longueurs, des pourcentages, ainsi que min-content, max-content et fit-content.

Tout comme width, inline-size n’a aucun effet sur les éléments en ligne, comme <span>. Vous retrouverez le même vocabulaire dans les container queries : container-type: inline-size suit justement la taille en ligne.

Syntaxe

inline-size: auto | <longueur> | <pourcentage> | min-content | max-content | fit-content;
block-size: auto | <longueur> | <pourcentage> | min-content | max-content | fit-content;

Valeurs

auto
Un élément de bloc occupe toute la longueur de ligne disponible, c’est-à-dire toute la largeur de son parent.
160px
<longueur>
Une taille en ligne fixe. Dans un texte horizontal, cela correspond à 160px de largeur.
50%
<pourcentage>
La moitié de la taille en ligne du bloc englobant.
block-size: 80px
axe de bloc
La paire pour l’axe de bloc. Dans un texte horizontal, elle définit la hauteur de l’élément.
max-inline-size: 24ch
limite supérieure
Le paragraphe compte au plus environ 24 caractères par ligne. En écriture verticale, la même règle limiterait la hauteur de la colonne de texte.
vertical-rl
écriture verticale
En écriture verticale, l’axe en ligne va de haut en bas, donc inline-size: 100px définit la hauteur de l’élément, pas sa largeur. La largeur dépend maintenant du contenu.

Valeur	Type	Description
auto		Un élément de bloc occupe toute la longueur de ligne disponible, c’est-à-dire toute la largeur de son parent.
160px	<longueur>	Une taille en ligne fixe. Dans un texte horizontal, cela correspond à 160px de largeur.
50%	<pourcentage>	La moitié de la taille en ligne du bloc englobant.
block-size: 80px	axe de bloc	La paire pour l’axe de bloc. Dans un texte horizontal, elle définit la hauteur de l’élément.
max-inline-size: 24ch	limite supérieure	Le paragraphe compte au plus environ 24 caractères par ligne. En écriture verticale, la même règle limiterait la hauteur de la colonne de texte.
vertical-rl	écriture verticale	En écriture verticale, l’axe en ligne va de haut en bas, donc `inline-size: 100px` définit la hauteur de l’élément, pas sa largeur. La largeur dépend maintenant du contenu.

Valeurs en pratique

auto

Un élément de bloc occupe toute la longueur de ligne disponible, c’est-à-dire toute la largeur de son parent.

.demo { inline-size: auto; }

160px

Une taille en ligne fixe. Dans un texte horizontal, cela correspond à 160px de largeur.

.demo { inline-size: 160px; }

50%

La moitié de la taille en ligne du bloc englobant.

.demo { inline-size: 50%; }

block-size: 80px

La paire pour l’axe de bloc. Dans un texte horizontal, elle définit la hauteur de l’élément.

.demo { block-size: 80px; }

max-inline-size: 24ch

Le paragraphe compte au plus environ 24 caractères par ligne. En écriture verticale, la même règle limiterait la hauteur de la colonne de texte.

.demo { max-inline-size: 24ch; }

vertical-rl

En écriture verticale, l’axe en ligne va de haut en bas, donc inline-size: 100px définit la hauteur de l’élément, pas sa largeur. La largeur dépend maintenant du contenu.

.stage { writing-mode: vertical-rl; width: 100%; height: 170px; }
.demo { inline-size: 100px; }

Compatibilité des navigateurs

Largement disponible

Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.

Chrome
Edge
Firefox
Safari

Bonnes pratiques

Pour une colonne de texte, max-inline-size: 65ch fonctionne bien. En écriture verticale, la même règle limitera raisonnablement la hauteur de la colonne.
Ne définissez pas width et inline-size sur le même élément. Elles décrivent la même dimension, donc c’est la déclaration qui arrive plus tard dans la cascade qui l’emporte, et c’est facile à manquer.
Si inline-size ne semble pas fonctionner, vérifiez le display. Tout comme width, elle n’a aucun effet sur <span> ou <a> sans passer à inline-block ou block.

Entrées associées

Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.

Leçons gratuitesPratiquez CSS dans le cours HTML et CSSDes exercices avec indices, un éditeur de code et une progression enregistrée au fur et à mesure.Voir le cours