Maison > Article > interface Web > Comment définir l'espacement des lignes et l'espacement des mots en CSS
Comment définir l'espacement des lignes et l'espacement des mots en CSS
- 醉折花枝作酒筹original
- 2021-04-09 13:57:205867parcourir
En CSS, vous pouvez définir l'espacement des mots via l'attribut letter-spacing, la syntaxe "letter-spacing: value" ; définir l'espacement des lignes via l'attribut line-height, la syntaxe "line-height : valeur relative | valeur absolue".
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
CSS définissant l'espacement des lignes
En CSS, l'attribut line-height est utilisé pour définir l'espacement des lignes et la valeur de la ligne -height représente la distance entre les lignes de base de deux lignes de texte.
La ligne de base du texte signifie que si le texte est souligné, alors les lignes supérieure et inférieure sont la ligne de base du texte.
La valeur de Line-height est définie sur une valeur spécifique, qui peut être une valeur relative ou une valeur absolue. Dans les pages statiques, les valeurs absolues sont souvent utilisées lorsque la taille du texte est fixe, mais pour. utilisateurs tels que les forums et les blogs. Les pages avec des tailles de police personnalisables sont généralement définies sur des valeurs relatives, de sorte que l'espacement des lignes correspondant puisse être modifié avec la taille de police définie par l'utilisateur.
<span style="font-size:24px;"><html>
<head>
<title>
行间距
</title>
<style>
<!--
p.one{
font-size:10pt;
line-height:8pt;
}
p.second{
font-size:18px;
}
p.third{font-size:10px;
}
p.second,p.third{
line-height:1.5em;
}
-->
</style>
</head>
<body>
<p class="one">9月23日是“秋分”，我国古籍《春秋繁露、阴阳出入上下篇》中说：“秋分者，阴阳相半也，故昼夜均而寒暑平。”“秋分”的意思有二：一是太阳在这时到达黄径180.一天24小时昼夜均分，各12小时；二是按我国古代以立春、立夏、立秋、立冬为四季开始的季节划分法，秋分日居秋季90天之中，平分了秋季。</p>
<p class="second">秋分时节，我国常见流域及其以北的广大地区，均夏侯进入了秋季，日平均气温都降到了22℃以下。北方冷气团开始具有一定的势力，大部分地区雨季刚刚结束，凉风习习，碧空万里，风和日丽，秋高气爽，丹桂飘香，蟹肥橘黄，秋分是美好宜人的时节。</p>
<p class="third">秋季降温快的特点，使得秋收、秋耕、秋种的“三秋”大忙显得格外紧张。秋分棉花吐絮，烟叶也由绿变黄，正是收获的大好时机。华北地区已开始播种冬麦，长江流域及南部广大地区正忙着晚稻的收割，抢晴耕翻土地，准备油菜播种。</p>
</body>
</html>
</span>Le code est comme ci-dessus. Le premier paragraphe du texte utilise une valeur absolue et l'espacement des lignes est défini plus petit que la taille du texte. Par conséquent, le texte se chevauche partiellement.
Les deuxième et troisième paragraphes sont définis avec des tailles de texte différentes, mais en raison de l'utilisation de valeurs relatives, l'espacement des lignes peut être automatiquement ajusté.
CSS définissant l'espacement des mots
CSS utilise l'attribut letter-spacing pour ajuster l'espacement des mots. Cet attribut peut également définir des valeurs relatives et absolues. .
<span style="font-size:24px;"><html>
<head>
<title>
字间距
</title>
<style>
<!--
p.one{
font-size:10pt;
letter-spacing:-2pt;
}
p.second{
font-size:18px;
}
p.third{
font-size:11px;
}
p.second,p.third{
letter-spacing:.5em;
}
-->
</style>
</head>
<body>
<p classs="one">文字间距1，负数</p>
<p class="second">文字间距2，相对数值</p>
<p class="third">文字间距3，相对数值</p>
</body>
</html>
</span> Le code est comme ci-dessus. Vous pouvez voir que l'attribut d'espacement du texte, espacement des lettres, peut non seulement utiliser des valeurs relatives et absolues, mais également utiliser des nombres négatifs pour obtenir l'effet de chevauchement de texte.
[Apprentissage recommandé : 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!