Maison  >  Article  >  interface Web  >  Comment définir l'espacement des lignes du texte en CSS

Comment définir l'espacement des lignes du texte en CSS

青灯夜游
青灯夜游original
2021-11-09 17:35:1913058parcourir

En CSS, vous pouvez utiliser l'attribut line-height pour définir l'espacement des lignes du texte. La fonction de cet attribut est de définir la distance entre les lignes et d'ajuster l'espacement des polices de chaque ligne de texte. line-height: spacing value" à l'élément de texte. ;" le style suffit ; il convient de noter que la valeur d'espacement ne peut pas être négative.

Comment définir l'espacement des lignes du texte en CSS

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

En CSS, si vous souhaitez ajuster et définir l'espacement des polices (espacement des lignes) de chaque ligne de texte, vous utilisez l'attribut line-height. La propriété

line-height définit la distance entre les lignes (hauteur de la ligne). Remarque : les valeurs négatives ne sont pas autorisées.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style>
			div{
				border: 1px solid red;
				margin-bottom: 10px;
			}
			.div-a {
				line-height: 22px
			}

			/* css 注释说明:设置行距行高22px */
			.div-b {
				line-height: 40px
			}

			/* 设置行距行高22px */
		</style>
	</head>
	<body>
		<div class="div-a">
			我被设置行高22px<br />
			我行距为22<br />
			测试文本,占位内容
		</div>
		<div class="div-b">
			我被设置行高40px<br />
			我行距为40<br />
			测试文本,占位内容
		</div>
	</body>
</html>

Rendu :

Comment définir lespacement des lignes du texte en CSS

Description : La valeur que l'attribut line-height peut être défini

  • number définit un nombre, qui sera multiplié par la taille de police actuelle à définir l'espacement des lignes. number 设置数字,此数字会与当前的字体尺寸相乘来设置行间距。

  • length 设置固定的行间距。

  • %

length définit un espacement de ligne fixe.

% Pourcentage d'espacement des lignes basé sur la taille de police actuelle. 🎜🎜🎜🎜 (Partage de vidéos 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