Unités CSS


Table des matières

    Afficher la table des matières


Unités CSS

CSS dispose de plusieurs unités différentes pour exprimer une longueur.

De nombreuses propriétés CSS prennent des valeurs de « longueur », telles que :

width, margin, padding, font-size

La Longueur est un nombre suivi d'une unité de longueur, telle que :

10px, 2em

Exemple

Définissez différentes valeurs de longueur, en utilisant px (pixels) :

 h1 {
  font-size: 60px;
}
p {
  font-size: 25px;
  
  line-height: 50px;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 60px;
}

p {
  font-size: 25px;
  line-height: 50px;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>


Remarque : Un espace ne peut pas apparaître entre le numéro et l'unité. Cependant, si la valeur est 0, l'unité peut être omise.

Pour certaines propriétés CSS, les longueurs négatives sont autorisées.

Il existe deux types d'unités de longueur : absolue et relative.


Longueurs absolues

Les unités de longueur absolue sont fixes et une longueur exprimée dans l'une d'entre elles apparaîtra exactement comme cette taille.

Les unités de longueur absolue ne sont pas recommandées pour une utilisation à l'écran, car les tailles d'écran varient énormément. Toutefois, ils peuvent être utilisés si le support de sortie est connu, tel que quant à la mise en page d'impression.

cm

Description : centimètres

Essayez-le

<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 1.5cm;}
h2 {font-size: 1cm;}
p {
  font-size: 0.5cm;
  line-height: 1cm;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>


mm

Description : millimètres

Essayez-le

<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 15mm;}
h2 {font-size: 10mm;}
p {
  font-size: 5mm;
  line-height: 10mm;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>


in

Description : pouces (1 pouce=96 px = 2,54 cm)

Essayez-le

<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 1in;}
h2 {font-size: 0.5in;}
p {
  font-size: 0.2in;
  line-height: 0.5in;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>


px *

Description : pixels (1px=1/96ème de 1 pouce)

Essayez-le

<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 50px;}
h2 {font-size: 30px;}
p {
  font-size: 15px;
  line-height: 20px;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>


pt

Description : points (1 pt=1/72 de 1 pouce)

Essayez-le

<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 50pt;}
h2 {font-size: 25pt;}
p {
  font-size: 15pt;
  line-height: 25pt;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>


pc

Description : picas (1pc=12 pt)

Essayez-le

<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 4.5pc;}
h2 {font-size: 3pc;}
p {
  font-size: 1.5pc;
  line-height: 3pc;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>


* Les pixels (px) sont relatifs à l'appareil de visualisation. Pour les appareils à faible résolution, 1 px correspond à un pixel (point) de l'écran. Pour imprimantes et haute résolution les écrans 1px impliquent plusieurs pixels d'appareil.


Longueurs relatives

Les unités de longueur relative spécifient une longueur par rapport à une autre propriété de longueur. Les unités de longueur relative s'adaptent mieux entre les différents supports de rendu.

em

Description : Par rapport à la taille de la police de l'élément (2em signifie 2 fois la taille de la police actuelle)

Essayez-le

<!DOCTYPE html>
<html>
<head>
<style>
p {
  font-size: 16px;
  line-height: 2em;
}

div {
  font-size: 30px;
  border: 1px solid black;
}

span {
  font-size: 0.5em;
}
</style>
</head>
<body>

<p>These paragraphs have a calculated line-height of: 2x16px = 32px.</p>
<p>These paragraphs have a calculated line-height of: 2x16px = 32px.</p>
<p>These paragraphs have a calculated line-height of: 2x16px = 32px.</p>
<div>The font-size of the div element is set to 30px. <span>The span element inside the div element has a font-size of 0.5em, which equals to 0.5x30 = 15px</span>.</div>

</body>
</html>


ex

Description : Par rapport à la hauteur x de la police actuelle (rarement utilisé)

Essayez-le

<!DOCTYPE html>
<html>
<head>
<style>
div {
  font-size: 30px;
  border: 1px solid black;
}

span {
  font-size: 1ex;
}
</style>
</head>
<body>

<div>The font-size of the div element is set to 30px. <span>The span element inside the div element has a font-size of 1ex</span>.</div>

</body>
</html>


ch

Description : Par rapport à la largeur du "0" (zéro)

Essayez-le

<!DOCTYPE html>
<html>
<head>
<style>
body {
 font-size:16px;
}

div {
  font-size: 3ch;
  border: 1px solid black;
}

</style>
</head>
<body>

<p>The font-size of this document is 16px.</p>

<div>The font-size of this div element is 3ch.</div>

<p>The ch unit sets the font-size relative to the width of the character "0".</p>

</body>
</html>


rem

Description : Par rapport à la taille de police de l'élément racine

Essayez-le

<!DOCTYPE html>
<html>
<head>
<style>
body {
 font-size:16px;
}

div {
  font-size: 2rem;
  border: 1px solid black;
}

</style>
</head>
<body>

<p>The font-size of this document is 16px.</p>

<div>The font-size of this div element is 2rem.</div>

<p>The rem unit sets the font-size relative to the browsers base font-size, and will not inherit from its parents.</p>

</body>
</html>


vw

Description : Par rapport à 1 % de la largeur de la fenêtre*

Essayez-le

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 20vw;
}
</style>
</head>
<body>

<h1>Hello</h1>

<p>Resize the width of the browser window to see how the font-size of h1 changes.</p>
<p>1vw = 1% of viewport width.</p>

</body>
</html>


vh

Description : Par rapport à 1 % de la hauteur de la fenêtre*

Essayez-le

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 20vh;
}
</style>
</head>
<body>

<h1>Hello</h1>

<p>Resize the height of the browser window to see how the font-size of h1 changes.</p>
<p>1vh = 1% of viewport height.</p>

</body>
</html>


vmin

Description : Par rapport à 1 % de la dimension la plus petite de la fenêtre d'affichage*

Essayez-le

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 15vmin;
}
</style>
</head>
<body>

<h1>Hello</h1>

<p>Resize the browser window (both width and height) to see how the font-size of h1 changes.</p>
<p>1vmin = 1vw or 1vh, whichever is smaller.</p>

</body>
</html>


vmax

Description : Par rapport à 1 % de la plus grande dimension de la fenêtre d'affichage*

Essayez-le

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 15vmax;
}
</style>
</head>
<body>

<h1>Hello</h1>

<p>Resize the browser window (both width and height) to see how the font-size of h1 changes.</p>
<p>1vmax = 1vw or 1vh, whichever is larger.</p>
<p>The vmax unit is not supported in Internet Explorer or Safari 6.1 and earlier versions.</p>

</body>
</html>


%

Description : Par rapport à l'élément parent

Essayez-le

<!DOCTYPE html>
<html>
<head>
<style>
body {
 font-size:16px;
}

div {
  font-size: 150%;
  border: 1px solid black;
}

</style>
</head>
<body>

<p>The font-size of this document is 16px.</p>

<div>The font-size of this div element is 150%.</div>

<p>The % unit sets the font-size relative to the current font-size.</p>

</body>
</html>


Astuce : Les unités em et rem sont pratiques pour créer parfaitement mise en page évolutive !
* Viewport=la taille de la fenêtre du navigateur. Si la fenêtre est de 50 cm large, 1vw=0,5 cm.



Prise en charge du navigateur

Les numéros dans le tableau spécifient la première version du navigateur qui prend entièrement en charge le unité de longueur.

Length Unit
em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5
ch 27.0 9.0 1.0 7.0 20.0
rem 4.0 9.0 3.6 4.1 11.6
vh, vw 20.0 9.0 19.0 6.0 20.0
vmin 20.0 12.0 19.0 6.0 20.0
vmax 26.0 16.0 19.0 7.0 20.0