diff options
Diffstat (limited to 'files/fr/web/css/line-height/index.html')
| -rw-r--r-- | files/fr/web/css/line-height/index.html | 187 |
1 files changed, 187 insertions, 0 deletions
diff --git a/files/fr/web/css/line-height/index.html b/files/fr/web/css/line-height/index.html new file mode 100644 index 0000000000..dc8f2b105c --- /dev/null +++ b/files/fr/web/css/line-height/index.html @@ -0,0 +1,187 @@ +--- +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> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<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><a id="normal" name="normal"><code>normal</code></a></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><a id="number" name="number"><code><number></code></a></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><a id="length" name="length"><code><length></code></a></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><a id="percentage" name="percentage"><code><percentage></code></a></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> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<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> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<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> |