Taille intrinsèque
En CSS, la taille intrinsèque d'un élément est la taille qu'il aurait uniquement en fonction de son contenu, sans tenir compte des effets du contexte de mise en page dans lequel il apparaît. C'est l'opposé de la taille extrinsèque d'un élément, qui est déterminée par des contraintes externes comme la taille du conteneur. Les tailles intrinsèques d'un élément sont représentées par ses tailles min-content et max-content.
Les éléments en ligne sont dimensionnés de façon intrinsèque. Les propriétés CSS du modèle de boîte comme height, width, block-size, inline-size, padding-block et margin-block n'ont aucun impact sur leur disposition (mais margin-inline et padding-inline affectent l'espacement à l'intérieur d'une ligne).
Par exemple, la taille intrinsèque minimale de l'élément en ligne <span> est la plus petite taille qu'il aurait s'il était flottant (sans aucune autre propriété de boîte CSS appliquée) dans un conteneur avec inline-size: 0. La taille intrinsèque maximale est l'inverse ; c'est la taille que ce même <span> aurait s'il était placé dans un conteneur avec une inline-size infinie.
La taille intrinsèque a la même signification pour les images que pour le texte — c'est la taille à laquelle les images sont affichées si aucun CSS n'est appliqué pour modifier le rendu.
La densité de pixels et la résolution influent sur la taille intrinsèque. Par défaut, les images sont supposées avoir une densité de pixels « 1x » (1 pixel matériel = 1 pixel CSS), auquel cas la taille intrinsèque correspond simplement à la hauteur et à la largeur en pixels. La taille intrinsèque et la résolution d'une image peuvent être explicitement spécifiées dans ses données EXIF. La densité de pixels d'une image peut aussi être définie via l'attribut srcset. Notez que si les deux mécanismes sont utilisés, la valeur de srcset est appliquée « par-dessus » la valeur EXIF.
Les tailles intrinsèques et leur mode de calcul sont définis dans le module de dimensionnement des boîtes CSS.
Taille intrinsèque minimale
Pour définir un élément selon sa taille intrinsèque minimale, définissez la propriété inline-size (ou width dans les modes d'écriture horizontaux, comme l'anglais ou l'hébreu) à min-content. Cela ajuste l'élément à la taille qu'il aurait si le texte était replié au maximum dans la direction en ligne, sans provoquer de débordement, avec autant de retours à la ligne souples que possible. Pour une boîte contenant une chaîne de texte, la taille intrinsèque minimale est définie par le mot le plus long.
p {
inline-size: min-content;
background-color: palegoldenrod;
}
Taille intrinsèque maximale
La taille intrinsèque maximale est l'inverse. C'est la taille de l'élément si la taille en ligne du conteneur était infinie. Le contenu textuel s'afficherait aussi large que possible, sans retour à la ligne souple, même s'il déborde de son conteneur. La valeur-clé max-content permet d'obtenir ce comportement.
p {
width: max-content;
background-color: palegoldenrod;
}
Voir aussi
- Terme associé du glossaire :
- Mots-clés de dimensionnement CSS :
min-content,max-contentetfit-content - La propriété CSS
interpolate-size - La propriété CSS
aspect-ratio - La fonction CSS
calc-size() - Module de dimensionnement des boîtes CSS
- Spécification du module CSS de dimensionnement des boîtes niveau 3 (angl.)