Maison > Article > interface Web > Quelle est la propriété CSS qui indique la hauteur des lignes ?

Quelle est la propriété CSS qui indique la hauteur des lignes ?

青灯夜游original: 2021-07-05 17:45:152542parcourir

L'attribut CSS indiquant la hauteur de la ligne est line-height. Cet attribut peut définir la distance entre les lignes (hauteur de la ligne). La syntaxe est "line-height: value;". Lorsqu'il est appliqué à un élément de niveau bloc, l'attribut line-height définit la distance minimale entre les lignes de base dans l'élément plutôt que la distance maximale.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3, ordinateur Dell G3.

La propriété CSS qui représente la hauteur de ligne est line-height.

l'attribut line-height peut définir la distance entre les lignes (les valeurs négatives ne sont pas autorisées);

L'attribut line-height affecte la disposition des zones 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 texte. La plus petite boîte pouvant contenir ce contenu est une boîte de ligne. Les valeurs d'attribut qui peuvent être définies par l'attribut

line-height :

值	描述
normal	默认。设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length	设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。
inherit	规定应该从父元素继承 line-height 属性的值。

Exemple :

<!DOCTYPE html>
<html>
<head>
<style>
p
{
border:1px solid red;
}
p.small
{
line-height: 0.5
}
p.big
{
line-height: 2
}
</style>
</head>
<body>

<p>
这是一个标准行高的段落。
浏览器的默认行高为“1”。
这是一个标准行高的段落。
这是一个标准行高的段落。
</p>

<p class="small">
这是一个更小行高的段落。
这是一个更小行高的段落。
这是一个更小行高的段落。
这是一个更小行高的段落。
</p>

<p class="big">
这是一个更大行高的段落。
这是一个更大行高的段落。
这是一个更大行高的段落。
这是一个更大行高的段落。
</p>

</body>
</html>

Rendu :

Quelle est la propriété CSS qui indique la hauteur des lignes ?

(Partage vidéo d'apprentissage : tutoriel vidéo CSS)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Le CSS est-il un framework ?Article suivant：Le CSS est-il un framework ?

Articles Liés

Voir plus