1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
|
---
title: line-height
slug: Web/CSS/line-height
tags:
- CSS
- Propriété
- Reference
translation_of: Web/CSS/line-height
---
<div>{{CSSRef}}</div>
<p>La propriété <code><strong>line-height</strong></code> définit la hauteur de la boîte d'une ligne.</p>
<p>Sur les éléments de bloc, la propriété <strong><code>line-height</code></strong> indique la hauteur minimale des lignes au sein de l'élément. Sur les éléments en ligne qui ne sont pas <a href="/fr/docs/Web/CSS/Élément_remplacé">remplacés</a>, <strong><code>line-height</code></strong> indique la hauteur utilisée pour calculer la hauteur de la boîte d'une ligne.</p>
<div>{{EmbedInteractiveExample("pages/css/line-height.html")}}</div>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="brush:css">/* Valeur avec un mot-clé */
line-height: normal;
/* Type <number> */
/* S'il n'y a pas d'unité, cela
représente un facteur multiplicateur
de la taille de la police appliquée à
l'élément */
line-height: 3.5;
/* Valeur de longueur */
/* Type <length> */
line-height: 3em;
/* Valeurs proportionnelles */
/* Type <percentage> */
line-height: 34%;
/* Valeurs globales */
line-height: inherit;
line-height: initial;
line-height: unset;
</pre>
<p>La propriété <code>line-height</code> peut être définie grâce :</p>
<ul>
<li>à un nombre (une valeur de type <code><a href="#number"><number></a></code>)</li>
<li>à une longueur (une valeur de type <code><a href="#length"><length></a></code>)</li>
<li>à un pourcentage (une valeur de type <code><a href="#percentage"><percentage></a></code>)</li>
<li>au mot-clé <code><a href="#normal">normal</a></code></li>
</ul>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code>normal</code></dt>
<dd>Le comportement dépend de l'agent utilisateur. Pour les navigateurs de bureau, l'agent utilisateur prend généralement une valeur environ égale à 1.2 selon la valeur de <code>font-family</code>.</dd>
<dt><code><number></code></dt>
<dd>La valeur utilisée est <strong>sans unité</strong> (type {{cssxref("<number>")}}) et correspond à un facteur multiplicateur de la taille de fonte utilisée. La valeur calculée est la même que celle définie avec <code><number></code>. Dans la plupart des cas, c'est la méthode qu'on privilégiera pour définir <code>line-height</code> et éviter les effets de l'héritage.</dd>
<dt><code><length></code></dt>
<dd>La valeur de longueur (type {{cssxref("<length>")}}) est utilisée pour calculer la hauteur de la boîte de la ligne. Les différentes unités qui peuvent être utilisées sont décrites avec la page {{cssxref("<length>")}}. Les valeurs exprimées en <code>em</code> peuvent produire des résultats inattendus.</dd>
<dt><code><percentage></code></dt>
<dd>La valeur exprimée est relative à la taille de fonte utilisée pour l'élément. La valeur calculée sera le pourcentage (type {{cssxref("<percentage>")}}) indiqué, multiplié par la taille calculée de la police de l'élément. Voir la section Notes pour plus de précisions sur le comportement de ce type et des valeurs exprimées en <code>em</code>.</dd>
<dt><code>-moz-block-height</code> {{non-standard_inline}}</dt>
<dd>La hauteur de la ligne correspond à la hauteur du contenu pour le bloc courant.</dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
{{csssyntax}}
<h2 id="Exemples">Exemples</h2>
<pre class="brush: css">/* Toutes les règles qui suivent
fourniront un résultat équivalent */
div { line-height: 1.2; font-size: 10pt } /* number */
div { line-height: 1.2em; font-size: 10pt } /* length */
div { line-height: 120%; font-size: 10pt } /* percentage */
div { font: 10pt/1.2 Georgia,"Bitstream Charter",serif }</pre>
<h3 id="Notes">Notes</h3>
<ul>
<li>Plus souvent, on utilisera la propriété raccourcie {{cssxref("font")}} plutôt que <code>line-height</code>. Pour cette propriété raccourcie, il est cependant nécessaire d'avoir une valeur pour la propriété <code>font-family</code>.</li>
</ul>
<h3 id="Gestion_de_l'héritage_et_valeurs_sans_unité">Gestion de l'héritage et valeurs sans unité</h3>
<p>Dans cet exemple, on voit qu'il est préférable d'utiliser des valeurs de type {{cssxref("<number>")}} plutôt que des valeurs de longueur (type {{cssxref("<length>")}}.</p>
<p>On utilisera deux éléments {{HTMLElement("div")}}. Le premier aura une bordure verte et une valeur sans unité. Le second aura une bordure rouge et une valeur de longueur</p>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">.green {
line-height: 1.1;
border: solid limegreen;
}
.red {
line-height: 1.1em;
border: solid red;
}
h1 {
font-size: 30px;
}
.box {
width: 18em;
display: inline-block;
vertical-align: top;
font-size: 15px;
}
</pre>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><div class="box green">
<h1>Avoid unexpected results by using unitless line-height</h1>
length and percentage line-heights have poor inheritance behavior ...
</div>
<div class="box red">
<h1>Avoid unexpected results by using unitless line-height</h1>
length and percentage line-heights have poor inheritance behavior ...
</div>
<!-- La première hauteur pour <h1> est calculée à partir de sa propre hauteur (30px × 1.1) = <strong>33px</strong> -->
<!-- La hauteur du deuxième <h1> est basée sur la hauteur du div (15px × 1.1) = <strong>16.5px</strong> ... -->
</pre>
<h4 id="Résultat">Résultat</h4>
<p>{{EmbedLiveSample("Gestion_de_l'héritage_et_valeurs_sans_unité", '100%', '200', '')}}</p>
<h2 id="Accessibilité">Accessibilité</h2>
<p>Il est nécessaire d'utiliser une valeur minimale de <code>1.5</code> pour la propriété <code>line-height</code> lorsqu'on l'applique sur le contenu des paragraphes principaux. Cela aidera les personnes ayant du mal à lire et les personnes dyslexiques. Utiliser une valeur sans unité permet de garantir une mise à l'échelle proportionnelle lorsqu'on zoome/dézoome.</p>
<ul>
<li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html"><em>Visual Presentation: Understanding SC 1.4.8, Understanding WCAG 2.0</em> (en anglais)</a></li>
</ul>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Transitions', '#animatable-css', 'line-height')}}</td>
<td>{{Spec2('CSS3 Transitions')}}</td>
<td><code>line-height</code> peut désormais être animée.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'visudet.html#propdef-line-height', 'line-height')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Aucun changement.</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#line-height', 'line-height')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{Compat("css.properties.line-height")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{cssxref("font")}}</li>
<li>{{cssxref("font-size")}}</li>
</ul>
|
