Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
inline-size
Baseline Widely available *
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis janvier 2020.
* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.
La propriétéCSSinline-size définit la taille du bloc d'un élément selon l'axe en ligne. Siwriting-mode est horizontal, cela correspond àwidth ; si le mode d'écriture est vertical, cela correspond àheight. Une propriété associée estblock-size, qui définit l'autre dimension de l'élément.
Exemple interactif
inline-size: 150px;writing-mode: horizontal-tb;inline-size: 150px;writing-mode: vertical-rl;inline-size: auto;writing-mode: horizontal-tb;inline-size: auto;writing-mode: vertical-lr;<section> <div> Ceci est une boîte où vous pouvez changer la inline-size. </div></section>#example-element { display: flex; flex-direction: column; background-color: #5b6dcd; height: 80%; justify-content: center; color: white;}Syntaxe
/* Valeurs de type <length> */inline-size: 300px;inline-size: 25em;inline-size: anchor-size(width);inline-size: anchor-size(--my-anchor inline);/* Valeurs de type <percentage> */inline-size: 75%;/* Valeurs avec un mot-clé */inline-size: max-content;inline-size: min-content;inline-size: fit-content;inline-size: fit-content(20em);inline-size: auto;/* Valeurs globales */inline-size: inherit;inline-size: initial;inline-size: revert;inline-size: revert-layer;inline-size: unset;Valeurs
La propriétéinline-size peut prendre les mêmes valeurs que les propriétéswidth etheight.
Définition formelle
| Valeur initiale | auto |
|---|---|
| Applicabilité | identique àwidth et àheight |
| Héritée | non |
| Pourcentages | la taille en ligne du bloc englobant |
| Valeur calculée | identique àwidth et àheight |
| Type d'animation | unelongueur,pourcentage ou calc() ; |
Syntaxe formelle
inline-size =
<'width'>
<width> =
auto|
<length-percentage [0,∞]>|
min-content|
max-content|
fit-content(<length-percentage [0,∞]>)|
<calc-size()>|
<anchor-size()>|
stretch|
fit-content|
contain
<length-percentage> =
<length>|
<percentage>
<calc-size()> =
calc-size(<calc-size-basis> ,<calc-sum>)
<anchor-size()> =
anchor-size([<anchor-name>||<anchor-size>]? ,<length-percentage>?)
<calc-size-basis> =
<size-keyword>|
<calc-size()>|
any|
<calc-sum>
<calc-sum> =
<calc-product>[[ '+'| '-']<calc-product>]*
<anchor-name> =
<dashed-ident>
<anchor-size> =
width|
height|
block|
inline|
self-block|
self-inline
<calc-product> =
<calc-value>[[ '*'| /]<calc-value>]*
<calc-value> =
<number>|
<dimension>|
<percentage>|
<calc-keyword>|
(<calc-sum>)
<calc-keyword> =
e|
pi|
infinity|
-infinity|
NaN
Exemples
Définir la taille en pixels sur l'axe en ligne
HTML
<p>Texte d'exemple</p>CSS
.exempleTexte { writing-mode: vertical-rl; background-color: yellow; inline-size: 110px;}Résultat
Spécifications
| Specification |
|---|
| CSS Logical Properties and Values Module Level 1 # dimension-properties |
| CSS Box Sizing Module Level 4 # sizing-values |
Compatibilité des navigateurs
Voir aussi
- Les propriétés physiques correspondantes :
widthetheight - La propriété
writing-mode