Comment contrôler la hauteur des lignes avec CSS ?-tutoriel CSS-php.cn

Comment contrôler la hauteur des lignes avec CSS ?

青灯夜游

Libérer： 2020-11-30 15:57:51

original

6272 Les gens l'ont consulté

En CSS, la hauteur de ligne peut être contrôlée via l'attribut line-height, qui peut définir la distance (hauteur de ligne) entre les lignes via des pourcentages, des nombres, des valeurs de pixels, etc. ; : Valeur d'attribut ;", la valeur d'attribut peut être définie sur une valeur en pourcentage, un nombre, une valeur en pixels et un mot-clé normal.

Comment contrôler la hauteur des lignes avec CSS ?

L'environnement d'exploitation de ce tutoriel : Système Windows 10, CSS3, cet article est applicable à toutes les marques d'ordinateurs.

Propriété CSS line-height

La propriété line-height définit la distance entre les lignes (hauteur de ligne).

Remarque : les valeurs négatives ne sont pas autorisées.

Cet attribut affecte la disposition de la zone de ligne. Lorsqu'il est appliqué à un élément de niveau bloc, il définit la distance minimale entre les lignes de base dans cet élément plutôt que la distance maximale.

La différence calculée entre la hauteur de ligne et la taille de police (appelée « espacement des lignes » en CSS) est divisée en deux moitiés et ajoutée en haut et en bas d'une ligne de contenu textuel. La plus petite boîte pouvant contenir ce contenu est une boîte de ligne.

Syntaxe :

line-height:属性值;

Copier après la connexion

Valeurs d'attribut possibles

normal par défaut. Définissez un espacement raisonnable des lignes.
numéro définit un nombre qui sera multiplié par la taille de police actuelle pour définir l'espacement des lignes.
length définit un espacement de ligne fixe.
% Pourcentage d'espacement des lignes basé sur la taille de police actuelle.

Exemple :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
p.small1 {line-height:70%;}
p.big1 {line-height:200%;}
p.small2{line-height: 10px}
p.big2{line-height: 30px}
p.small3{line-height: 0.5}
p.big3{line-height: 2}
</style>
</head>

<body>
<p>
这是一个标准行高的段落。<br>
这是一个标准行高的段落。<br>
大多数浏览器的默认行高约为110%至120%。<br>
</p>

<p class="small1">
这是一个更小行高的段落。使用百分比设置<br>
这是一个更小行高的段落。使用百分比设置<br>
这是一个更小行高的段落。使用百分比设置<br>
这是一个更小行高的段落。使用百分比设置<br>
</p>

<p class="big1">
这是一个更大行高的段落。使用百分比设置<br>
这是一个更大行高的段落。使用百分比设置<br>
这是一个更大行高的段落。使用百分比设置<br>
这是一个更大行高的段落。使用百分比设置<br>
</p>
	
<p class="small2">
这是一个更小行高的段落。使用像素值设置<br>
这是一个更小行高的段落。使用像素值设置<br>
这是一个更小行高的段落。使用像素值设置<br>
这是一个更小行高的段落。使用像素值设置<br>
</p>

<p class="big2">
这是一个更大行高的段落。使用像素值设置<br>
这是一个更大行高的段落。使用像素值设置<br>
这是一个更大行高的段落。使用像素值设置<br>
这是一个更大行高的段落。使用像素值设置<br>
</p>
<p class="small3">
这是一个更小行高的段落。使用数值来设置<br>
这是一个更小行高的段落。使用数值来设置<br>
这是一个更小行高的段落。使用数值来设置<br>
这是一个更小行高的段落。使用数值来设置<br>
</p>

<p class="big3">
这是一个更大行高的段落。使用数值来设置<br>
这是一个更大行高的段落。使用数值来设置<br>
这是一个更大行高的段落。使用数值来设置<br>
这是一个更大行高的段落。使用数值来设置<br>
</p>

</body>
</html>

Copier après la connexion

Comment contrôler la hauteur des lignes avec CSS ?