web-dev-qa-db-fra.com

Définir l'interligne

Comment puis-je définir l'espacement des lignes avec CSS, comme nous pouvons le définir dans MS Word?

cssline
129
Moon

Essayez la propriété line-height .

Par exemple, 12px font-size et 4px sont distants des lignes inférieure et supérieure:

line-height: 20px; /* 4px +12px + 4px */

Ou avec em unités

line-height: 1.7em; /* 1em = 12px in this case. 20/12 == 1.666666  */
217
Mario Cesar

En retard à cette fête, mais je voulais ajouter.

Vous pouvez également utiliser une valeur sans unité, qui correspond au nombre de lignes: line-height: 2; est à double interligne, line-height: 1.5; est égal à un et demi, etc.

96
MikeTheLiar

Si vous voulez des lignes condensées, vous pouvez définir la même valeur pour font-size et line-height.

Dans votre fichier CSS 

.condensedlines {              
    font-size:   10pt;
    line-height: 10pt;  /* try also a bit smaller line-height */
}

Dans votre fichier HTML 

<p class="condensedlines">
bla bla bla bla bla bla <br>
bla bla bla bla bla bla <br>
bla bla bla bla bla bla <br>
</p>

-> Jouez avec cet extrait sur jsfiddle.net

Vous pouvez également augmenter line-height pour le contrôle de l'espacement entre les lignes:

.mylinespacing {
    font-size:   10pt;
    line-height: 14pt; /* 14 = 10 + 2 above + 2 below */
}
9
olibre

Vous ne pouvez pas définir l'espacement entre les paragraphes dans CSS à l'aide de line-height, l'espacement entre les blocs <p>. Cela définit plutôt l’espacement des lignes entre les paragraphes, l’espace entre les lignes d’un bloc <p>. Autrement dit, line-height est l'interligne du typographe dans le paragraphe qui est contrôlé par line-height.

À l'heure actuelle, je ne connais aucune méthode en CSS permettant de produire (par exemple) un espacement 0.15em inter -<p>, qu'il s'agisse d'utiliser des variantes em ou rem sur une propriété de police quelconque. Je suppose que cela peut être fait avec des flotteurs ou des compensations plus complexes. Dommage que cela soit nécessaire en CSS.

9
Thomas Visel

Essayez cette propriété

line-height:200%;

ou

line-height:17px;

utiliser l'augmentation et la diminution du volume

8
ANANTH.S

Je ne sais pas si c'est ce que vous vouliez dire:

line-height: size;
3
Alan Haggai Alavi

Essayez la propriété line-height; il y a beaucoup de façons d'attribuer la hauteur de ligne

3
Harsha M V

Oui, comme tout le monde le dit, line-height est la chose. Quelle que soit la police que vous utilisez, un caractère de hauteur moyenne (tel qu'un ou ■, ne passant pas par le haut ou par le bas) doit avoir la même hauteur par la longueur entre line-height: 0.6 et 0.65.

<div style="line-height: 0.65; font-family: 'Fira Code', monospace, sans-serif">
aaaaa<br>
aaaaa<br>
aaaaa<br>
aaaaa<br>
aaaaa
</div>
<br>
<br>

<div style="line-height: 0.6; font-family: 'Fira Code', monospace, sans-serif">
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■
</div>
<br>
<br>
<strong>BUT</strong>
<br>
<br>
<div style="line-height: 0.65; font-family: 'Fira Code', monospace, sans-serif">
ddd<br>
ƒƒƒ<br>
ggg
</div>
0
RubenVerg

lineSpacing est utilisé dans React Native (ou dans les applications mobiles natives).

Pour le Web, vous pouvez utiliser letterSpacing (ou letter-spacing)

0
Eric Kim