Cours par Webcam

Cours par Webcam

Formateur Web pour adultes depuis plus 11 ans, je vous propose des COURS collectifs par WEBCAM en LIVE pour booster vos connaissances et être autonome dans la création de site.

En savoir plus

CSS - texte

CSS - police

CSS - arrière-plan

CSS - boîte

CSS - mise en page

CSS - liste

CSS - tableau

CSS - animation

CSS - pseudo-class

CSS - pseudo-élément

CSS - les sélecteurs

Facebook
Twitter
LinkedIn

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é

navigateur-chromenavigateur-firefoxnavigateur-ienavigateur-safarinavigateur-opera

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-decorationtext-transform– text-indent– text-spacing– letter-spacingwhite-space– vertical-align– direction– content

A lire aussi

tutowebdesign

Afficher du contenu au scroll

Afficher du contenu au scroll Voici un effet impressionnant et pourtant très facile à mettre en place sur vos pages. Le principe consiste à faire

Lire »