Une erreur de script s'est produite sur cette page. En attendant qu'elle soit traitée par les éditeurs du site, vous pouvez consulter le contenu partiel ci-dessous.

{{CSSRef}}

Sur les éléments de bloc, la propriété line-height indique la hauteur minimale des lignes au sein de l'élément.

Sur les éléments en ligne qui ne sont pas remplacés, line-height indique la hauteur utilisée pour calculer la hauteur de la boîte d'une ligne.

{{cssinfo}}

Syntaxe

/* 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;

Valeurs

normal
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 font-family.
<number>
La valeur utilisée est sans unité (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 <number>. Dans la plupart des cas, c'est la méthode qu'on privilégiera pour définir line-height et éviter les effets de l'héritage.
<length>
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>")}}.
<percentage>
La valeur exprimée est relative à la taille de fonte utilisée pour l'élément. La valeur calculée sera le pourcentage 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 em.

Syntaxe formelle

{{csssyntax}}

Exemples

/* 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 { line-height: 12pt;  font-size: 10pt }   /* length */
div { font: 10pt/1.2  Georgia,"Bitstream Charter",serif }

Notes

  • Plus souvent, on utilisera la propriété raccourcie {{cssxref("font")}} plutôt que line-height.

Gestion de l'héritage et valeurs sans unité

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>")}}.

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

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;
}

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) = 33px  --> 
<!-- La hauteur du deuxième <h1> est basée sur la hauteur du div (15px × 1.1) = 16.5px ... -->

Résultat

{{EmbedLiveSample("Gestion_de_l'héritage_et_valeurs_sans_unité", '100%', '200', '')}}

Spécifications

Spécification État Commentaires
{{SpecName('CSS3 Transitions', '#animatable-css', 'line-height')}} {{Spec2('CSS3 Transitions')}} line-height peut désormais être animée.
{{SpecName('CSS2.1', 'visudet.html#propdef-line-height', 'line-height')}} {{Spec2('CSS2.1')}} Aucun changement.
{{SpecName('CSS1', '#line-height', 'line-height')}} {{Spec2('CSS1')}} Définition initiale.

Compatibilité des navigateurs

{{CompatibilityTable}}
Fonctionnalité Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari
Support simple 1.0 {{CompatGeckoDesktop("1")}} {{CompatVersionUnknown 4.0 7.0 1.0
Fonctionnalité Android Firefox Mobile (Gecko) Edge IE Phone Opera Mobile Safari Mobile
Support simple 1.0 {{CompatGeckoMobile("1")}} {{CompatVersionUnknown}} 6.0 6.0 1.0

Voir aussi

  • {{cssxref("font")}}
  • {{cssxref("font-size")}}

Étiquettes et contributeurs liés au document

Étiquettes : 
 Dernière mise à jour par : SphinxKnight,