Type CSS `<length>`

Baseline

Large disponibilit

Cette fonctionnalit est bien tablie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

* Certaines parties de cette fonctionnalit peuvent bnficier de prise en charge variables.

Voir la compatibilit complte
En savoir plus

Le type de donnes CSS <length> correspond une mesure de distance. Les longueurs peuvent tre utilises dans de nombreuses proprits CSS, comme width, height, margin, padding, border-width, font-size et text-shadow.

Note : Bien que les valeurs <percentage> puissent tre utilises dans certaines proprits qui acceptent des valeurs <length>, elles ne sont pas elles-mmes des valeurs <length>. Voir <length-percentage>.

Syntaxe

Le type de donnes <length> consiste en un nombre (<number>) suivi de l'une des units listes ci-dessous. Comme pour toutes les dimensions CSS, il n'y a pas d'espace entre le nombre et l'unit littrale. L'unit de longueur est optionnelle si le nombre est 0.

Note : Certaines proprits autorisent des valeurs <length> ngatives, d'autres non.

Valeurs dfinies et valeurs calcules

La valeur dfinie d'une longueur (longueur dfinie) est reprsente par sa quantit et son unit. La valeur calcule d'une longueur (longueur calcule) est la longueur dfinie rsolue en une longueur absolue, et son unit n'est pas distingue.

Pour certaines proprits, telles que border-width, outline-width, column-rule-width et outline-offset, les valeurs calcules de <length> sont arrondies un nombre entier de pixels de l'appareil pour garantir un affichage visuel raisonnable :

Une valeur non nulle infrieure 1 pixel de l'appareil est arrondie l'unit suprieure.
Une valeur suprieure 1 pixel de l'appareil est arrondie l'unit infrieure la plus proche.

Par exemple, sur un cran avec un devicePixelRatio de 3, border-width: 1.5px est calcul environ 1.33px (arrondi l'unit infrieure de 4,5 4 pixels de l'appareil), et outline-width: 0.2px est calcul environ 0.33px (arrondi l'unit suprieure de 0,6 1 pixel de l'appareil).

Relative vs. absolute lengths

Les units <length> peuvent tre relatives ou absolues. Les longueurs relatives reprsentent une mesure en fonction d'une autre distance. Selon l'unit, cette distance peut tre la taille d'un caractre spcifique, la hauteur de ligne, ou la taille de la zone d'affichage. Les feuilles de style qui utilisent des units de longueur relatives peuvent plus facilement s'adapter d'un environnement de sortie un autre.

Note : Les lments enfants n'hritent pas des valeurs relatives telles que dfinies pour leur parent ; ils hritent des valeurs calcules.

Units de longueur relatives

Les units de longueur relatives CSS sont bases sur la police, le conteneur ou la taille de la zone d'affichage.

Units de longueur relatives bases sur la police

Les longueurs lies la police dfinissent la valeur <length> en fonction de la taille d'un caractre particulier ou d'une caractristique de la police actuellement utilise dans un lment ou son parent.

Note : Ces units, en particulier em et la racine relative rem, sont souvent utilises pour crer des mises en page adaptatives, qui maintiennent le rythme vertical de la page mme lorsque l'utilisateurice change la taille de la police.

cap: Reprsente la hauteur nominale des lettres capitales (cap height) de la police (font) de l'lment.
ch: Reprsente la largeur ou, plus prcisment, la mesure d'avancement du glyphe 0 (zro, le caractre Unicode U+0030) dans la police (font) de l'lment. Dans les cas o il est impossible ou peu pratique de dterminer la mesure du glyphe 0, il faut supposer qu'il mesure 0.5em de large sur 1em de haut.
em: Reprsente la taille de police (font-size) calcule de l'lment. Si utilise sur la proprit font-size, elle reprsente la taille de police hrite de l'lment.
ex: Reprsente la hauteur d'x de la police (font) de l'lment. Dans les polices comportant la lettre x, il s'agit gnralement de la hauteur des lettres minuscules de la police ; 1ex 0.5em dans de nombreuses polices.
ic: gal la mesure d'avancement utilise du glyphe "" (idogramme CJK de l'eau, U+6C34), trouve dans la police utilise pour l'afficher.
lh: gal la valeur calcule de la proprit line-height de l'lment sur lequel elle est utilise, convertie en longueur absolue. Cette unit permet des calculs de longueur bass sur la taille thorique d'une ligne vide idale. Cependant, la taille relle des botes de ligne peut diffrer selon leur contenu.

Units de longueur relatives bases sur la police de l'lment racine

Les units de longueur relatives la police de l'lment racine dfinissent la valeur <length> en fonction de la taille d'un caractre particulier ou d'une caractristique de la police de l'lment :root.

rcap: Reprsente la hauteur nominale des lettres capitales (cap height) de la police (font) de l'lment racine.
rch: Reprsente la largeur ou, plus prcisment, la mesure d'avancement du glyphe 0 (zro, le caractre Unicode U+0030) dans la police (font) de l'lment racine.
rem: Reprsente la taille de police (font-size) de l'lment racine (gnralement l'lment <html>). Lorsqu'elle est utilise sur la proprit font-size de l'lment racine, elle reprsente sa valeur initiale. La valeur par dfaut courante dans les navigateurs est 16px, mais les prfrences utilisateurices peuvent la modifier.
rex: Reprsente la hauteur d'x de la police (font) de l'lment racine.
ric: Reprsente la valeur de l'unit ic sur la police de l'lment racine.
rlh: Reprsente la valeur de l'unit lh sur la police de l'lment racine. Cette unit permet des calculs de longueur bass sur la taille thorique d'une ligne vide idale. Cependant, la taille relle des botes de ligne peut diffrer selon leur contenu.

Units de longueur relatives la zone d'affichage

Les units de longueur en pourcentage de la zone d'affichage sont bases sur quatre tailles diffrentes de zone d'affichage : petite, grande, dynamique et par dfaut. Cette distinction rpond au fait que les interfaces des navigateurs peuvent s'tendre ou se rtracter dynamiquement, masquant ou affichant le contenu sous-jacent.

Units pour petite zone d'affichage

Lorsque vous souhaitez utiliser la plus petite zone d'affichage possible en rponse l'expansion dynamique des interfaces du navigateur, utilisez la petite taille de zone d'affichage. Cette taille permet au contenu de remplir toute la zone d'affichage lorsque les interfaces du navigateur sont tendues. Ce choix peut toutefois laisser des espaces vides lorsque les interfaces se rtractent.

Par exemple, un lment dimensionn avec des units en pourcentage bases sur la petite zone d'affichage remplit parfaitement l'cran sans que son contenu ne soit masqu lorsque toutes les interfaces dynamiques du navigateur sont affiches. Lorsque ces interfaces sont masques, il peut cependant y avoir de l'espace supplmentaire autour de l'lment. Ainsi, les units pour petite zone d'affichage sont gnralement plus sres , mais peuvent produire une mise en page moins esthtique aprs interaction de l'utilisateurice avec la page.

La petite zone d'affichage est reprsente par le prfixe sv et donne les units de longueur en pourcentage sv*. Les tailles de ces units sont fixes, donc stables, sauf si la zone d'affichage elle-mme est redimensionne.

Units pour grande zone d'affichage

Lorsque vous souhaitez utiliser la plus grande zone d'affichage possible en rponse la rtraction dynamique des interfaces du navigateur, utilisez la grande taille de zone d'affichage. Cette taille permet au contenu de remplir toute la zone d'affichage lorsque les interfaces du navigateur sont rtractes. Attention : le contenu peut tre masqu lorsque les interfaces s'tendent.

Par exemple, sur les tlphones mobiles o l'espace d'affichage est limit, les navigateurs masquent souvent tout ou partie de la barre de titre et de la barre d'adresse aprs un dfilement. Un lment dimensionn avec une unit, en pourcentage, base sur la grande zone d'affichage remplit toute la page visible lorsque ces interfaces sont masques. Cependant, lorsque ces interfaces rtractables sont affiches, elles peuvent masquer le contenu dimensionn ou positionn avec les units pour grande zone d'affichage.

La grande zone d'affichage est reprsente par le prfixe lv et donne les units de longueur en pourcentage lv*. Les tailles de ces units sont fixes, donc stables, sauf si la zone d'affichage elle-mme est redimensionne.

Units pour zone d'affichage dynamique

Lorsque vous souhaitez que la zone d'affichage soit automatiquement dimensionne en fonction de l'expansion ou de la rtraction dynamique des interfaces du navigateur, utilisez la taille dynamique de zone d'affichage. Cette taille permet au contenu de s'adapter exactement la zone d'affichage, quelle que soit la prsence d'interfaces dynamiques.

La zone d'affichage dynamique est reprsente par le prfixe dv et donne les units de longueur en pourcentage dv*. Les tailles de ces units ne sont pas stables, mme si la zone d'affichage elle-mme ne change pas.

Note : Bien que la zone d'affichage dynamique offre plus de contrle et de flexibilit, l'utilisation d'units, en pourcentage, bases sur cette taille peut entraner un redimensionnement du contenu lors du dfilement de la page, ce qui peut dgrader l'interface et impacter les performances.

Units pour zone d'affichage par dfaut

La taille de zone d'affichage par dfaut est dfinie par le navigateur. Le comportement de l'unit rsultante peut tre quivalent celui d'une unit base sur la petite, la grande, une taille intermdiaire ou la zone d'affichage dynamique.

Note : Par exemple, un navigateur peut implmenter l'unit par dfaut pour la hauteur (vh) comme quivalente l'unit de hauteur pour grande zone d'affichage (lvh). Cela peut masquer du contenu sur un affichage en pleine page lorsque l'interface du navigateur est tendue. Actuellement, toutes les units par dfaut (vh, vw, etc.) sont quivalentes leurs homologues pour grande zone d'affichage (lvh, lvw, etc.).

Les longueurs en pourcentage de la zone d'affichage dfinissent des valeurs <length> en pourcentage par rapport la taille du bloc englobant initial, qui dpend soit de la taille de la zone d'affichage, soit de la zone de page, c'est--dire la partie visible du document. Lorsque la hauteur ou la largeur du bloc englobant initial change, les lments dimensionns en fonction de celui-ci sont redimensionns en consquence. Il existe une variante d'unit de longueur en pourcentage de la zone d'affichage pour chacune des tailles dcrites ci-dessus.

Note : Les longueurs de la zone d'affichage sont invalides dans les blocs de dclaration @page.

vh

Reprsente un pourcentage de la hauteur du bloc englobant initial de la zone d'affichage. 1vh correspond 1% de la hauteur de la zone d'affichage. Par exemple, si la hauteur de la zone d'affichage est de 300px, une valeur de 70vh pour une proprit donne 210px.

Les units respectives pour petite, grande et dynamique zone d'affichage sont svh, lvh et dvh. vh est quivalent lvh, c'est--dire l'unit base sur la grande zone d'affichage.

vw

Reprsente un pourcentage de la largeur du bloc englobant initial de la zone d'affichage. 1vw correspond 1% de la largeur de la zone d'affichage. Par exemple, si la largeur de la zone d'affichage est de 800px, une valeur de 50vw pour une proprit donne 400px.

Pour les zones d'affichage petite, grande et dynamique, les units respectives sont svw, lvw et dvw. vw est quivalent lvw, c'est--dire l'unit base sur la grande zone d'affichage.

vmax

Reprsente en pourcentage la plus grande valeur entre vw et vh.

Pour les zones d'affichage petite, grande et dynamique, les units respectives sont svmax, lvmax et dvmax. vmax est quivalent lvmax, c'est--dire l'unit base sur la grande zone d'affichage.

vmin

Reprsente en pourcentage la plus petite valeur entre vw et vh.

Pour les zones d'affichage petite, grande et dynamique, les units respectives sont svmin, lvmin et dvmin. vmin est quivalent lvmin, c'est--dire l'unit base sur la grande zone d'affichage.

vb

Reprsente le pourcentage de la taille du bloc englobant initial, dans la direction de l'axe de bloc de l'lment racine.

Pour les zones d'affichage petite, grande et dynamique, les units respectives sont svb, lvb et dvb. vb est quivalent lvb, c'est--dire l'unit base sur la grande zone d'affichage.

vi

Reprsente un pourcentage de la taille du bloc englobant initial, dans la direction de l'axe en ligne de l'lment racine.

Pour les zones d'affichage petite, grande et dynamique, les units respectives sont svi, lvi et dvi. vi est quivalent lvi, c'est--dire l'unit base sur la grande zone d'affichage.

Units de longueur relatives au conteneur

Lorsque vous appliquez des styles un conteneur l'aide de requtes de conteneur, vous pouvez utiliser des units de longueur relatives au conteneur. Ces units dfinissent une longueur relative aux dimensions du conteneur de requte. Les composants qui utilisent des units de longueur relatives leur conteneur sont plus flexibles utiliser dans diffrents conteneurs sans avoir recalculer des valeurs de longueur concrtes.

Si aucun conteneur ligible n'est disponible pour la requte, l'unit de longueur relative au conteneur prend par dfaut la petite unit de zone d'affichage pour cet axe (sv*).

Pour plus d'informations, voir Requtes de conteneur.

cqw: Reprsente un pourcentage de la largeur du conteneur de requte. 1cqw correspond 1% de la largeur du conteneur de requte. Par exemple, si la largeur du conteneur de requte est de 800px, une valeur de 50cqw pour une proprit donne 400px.
cqh: Reprsente un pourcentage de la hauteur du conteneur de requte. 1cqh correspond 1% de la hauteur du conteneur de requte. Par exemple, si la hauteur du conteneur de requte est de 300px, une valeur de 10cqh pour une proprit donne 30px.
cqi: Reprsente un pourcentage de la taille en ligne du conteneur de requte. 1cqi correspond 1% de la taille en ligne du conteneur de requte. Par exemple, si la taille en ligne du conteneur de requte est de 800px, une valeur de 50cqi pour une proprit donne 400px.
cqb: Reprsente un pourcentage de la taille de bloc du conteneur de requte. 1cqb correspond 1% de la taille de bloc du conteneur de requte. Par exemple, si la taille de bloc du conteneur de requte est de 300px, une valeur de 10cqb pour une proprit donne 30px.
cqmin: Reprsente un pourcentage de la plus petite valeur entre la taille en ligne ou la taille de bloc du conteneur de requte. 1cqmin correspond 1% de la plus petite valeur entre la taille en ligne ou la taille de bloc du conteneur de requte. Par exemple, si la taille en ligne du conteneur de requte est de 800px et sa taille de bloc de 300px, une valeur de 50cqmin pour une proprit donne 150px.
cqmax: Reprsente un pourcentage de la plus grande valeur entre la taille en ligne ou la taille de bloc du conteneur de requte. 1cqmax correspond 1% de la plus grande valeur entre la taille en ligne ou la taille de bloc du conteneur de requte. Par exemple, si la taille en ligne du conteneur de requte est de 800px et sa taille de bloc de 300px, une valeur de 50cqmax pour une proprit donne 400px.

Units de longueur absolues

Les units de longueur absolues reprsentent une mesure physique lorsque les proprits physiques du support de sortie sont connues, comme pour la mise en page l'impression. Cela se fait en ancrant l'une des units une unit physique ou l'unit d'angle visuel, puis en dfinissant les autres par rapport celle-ci. Les units physiques incluent cm, in, mm, pc, pt, px et Q. L'ancrage est ralis diffremment pour les appareils basse rsolution, comme les crans, et pour les appareils haute rsolution, comme les imprimantes.

Pour les appareils faible densit de pixels (dpi pour ppp en franais), l'unit px reprsente le pixel de rfrence physique ; les autres units sont dfinies par rapport celle-ci. Ainsi, 1in est dfini comme 96px, ce qui quivaut 72pt. Par consquent, sur ces appareils, les dimensions dcrites en pouces (in), centimtres (cm) ou millimtres (mm) ne correspondent pas ncessairement la taille de l'unit physique du mme nom.

Pour les appareils haute densit de pixels, les pouces (in), centimtres (cm) et millimtres (mm) sont identiques leurs quivalents physiques. L'unit px est donc dfinie par rapport eux (1/96 de 1in).

Note : De nombreuxses utilisateurices augmentent la taille de police par dfaut de leur agent utilisateur pour amliorer la lisibilit du texte. Les longueurs absolues peuvent poser des problmes d'accessibilit, car elles sont fixes et ne s'adaptent pas aux prfrences utilisateurices. Pour cette raison, il est prfrable d'utiliser des longueurs relatives (comme em ou rem) lors de la dfinition de font-size.

px: Un pixel. Pour les crans, cela reprsente traditionnellement un pixel matriel (point). Cependant, pour les imprimantes et les crans haute rsolution, un pixel CSS correspond plusieurs pixels matriels. 1px = 1in / 96.
cm: Un centimtre. 1cm = 96px / 2,54.
mm: Un millimtre. 1mm = 1cm / 10.
Q: Un quart de millimtre. 1Q = 1cm / 40.
in: Un pouce. 1in = 2,54cm = 96px.
pc: Un pica. 1pc = 12pt = 1in / 6.
pt: Un point. 1pt = 1in / 72.

Interpolation

Lorsqu'elles sont animes, les valeurs du type de donnes <length> sont interpoles comme des nombres rels virgule flottante. L'interpolation s'effectue sur la valeur calcule. La vitesse de l'interpolation est dtermine par la fonction de temporisation associe l'animation.

Exemples

Comparer diffrentes units de longueur

L'exemple suivant vous propose un champ de saisie dans lequel vous pouvez entrer une valeur <length> (par exemple : 300px, 50%, 30vw) pour dfinir la largeur d'une barre de rsultat qui apparat en dessous aprs avoir appuy sur la touche Entre ou Retour arrire.

Cela vous permet de comparer les effets des diffrentes units de longueur.

HTML

html

<div class="outer">
  <div class="input-container">
    <label for="length">Entrer la largeur&nbsp;:</label>
    <input type="text" id="length" />
  </div>
  <div class="inner"></div>
</div>
<div class="results"></div>

CSS

css

html {
  font-family: sans-serif;
  font-weight: bold;
  box-sizing: border-box;
}

.outer {
  width: 100%;
  height: 50px;
  background-color: #eeeeee;
  position: relative;
}

.inner {
  height: 50px;
  background-color: #999999;
  box-shadow:
    inset 3px 3px 5px rgb(255 255 255 / 50%),
    inset -3px -3px 5px rgb(0 0 0 / 50%);
}

.result {
  height: 20px;
  box-shadow:
    inset 3px 3px 5px rgb(255 255 255 / 50%),
    inset -3px -3px 5px rgb(0 0 0 / 50%);
  background-color: orange;
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.result code {
  position: absolute;
  margin-left: 20px;
}

.results {
  margin-top: 10px;
}

.input-container {
  position: absolute;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 50px;
}

label {
  margin: 0 10px 0 20px;
}

JavaScript

const inputDiv = document.querySelector(".inner");
const inputElem = document.querySelector("input");
const resultsDiv = document.querySelector(".results");

inputElem.addEventListener("change", () => {
  inputDiv.style.width = inputElem.value;

  const result = document.createElement("div");
  result.className = "result";
  result.style.width = inputElem.value;
  const code = document.createElement("code");
  code.textContent = `width: ${inputElem.value}`;
  result.appendChild(code);
  resultsDiv.appendChild(result);

  inputElem.value = "";
  inputElem.focus();
});