Attribut LINE-HEIGHT

Rôle

L’attribut line-height permet de spécifier la hauteur de ligne (interligne).

Version : CSS1

Héritage (inherit) : oui

Propriété Javascript : element.style.lineHeight

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

div p{
  line-height: 3em;
}

– Le code HTML

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat voluptate nobis eius consectetur eligendi. Cum harum autem quisquam, molestias corrupti deserunt itaque est veritatis deleniti eius, ducimus, cumque laboriosam veniam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus odio, eos hic recusandae consequuntur est fugit, explicabo quasi numquam in ipsa alias qui repellendus sapiente voluptate fuga quisquam enim facilis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam suscipit architecto, voluptatum reprehenderit vitae similique recusandae odit omnis velit exercitationem facere, sunt dignissimos, iste excepturi labore itaque magni earum dolorum.</p>
<div>
  <p>Pour les paragraphes de la balise div, la hauteur de ligne à été augmentée</p>
  <p>Pour les paragraphes de la balise div, la hauteur de ligne à été augmentée</p>
  <p>Pour les paragraphes de la balise div, la hauteur de ligne à été augmentée</p>
</div>

Résultat

La hauteur de ligne des paragraphes dans la balise div à été augmentée par le CSS

Compatibilité

L’attribut line-height est pris en charge par tous les principaux navigateurs

Valeurs

Les différentes valeurs de l’attribut line-height sont:

normal

Hauteur normal : valeur par défaut
Syntaxe :
line-height : normal

nombre

Un nombre qui sera un multiple de la valeur courante
Syntaxe :
line-height : 3

length

Définit une valeur d’interlignage en px, pt, cm, em.
Syntaxe :
line-height : 20px

pourcentage – %

Définit une valeur d’interlignage en pourcentage de la police courante.
Syntaxe :
line-height : 30%

initial

L’interligne est défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » l’héritage, par exemple un paragraphe peut ignorer l’interligne imposé par son élément parent.
Syntaxe :
line-height : initial

inherit

Hérite de la même propriété que l’élément parent.
Syntaxe :
line-height : inherit

A voir aussi

color– text-align– text-decoration– text-transform– text-indent– text-spacing– letter-spacing–white-space– vertical-align– direction– content