CSS如何設定行間距和字間距
- 醉折花枝作酒筹原創
- 2021-04-09 13:57:205867瀏覽
在css中，可以透過letter-spacing屬性來設定字間距，語法「letter-spacing:值」；透過line-height屬性來設定行間距，語法「line-height:相對數值|絕對數值」。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
CSS設定行間距
在CSS中透過line-height屬性來實現行間距的設置， line-height的值表示的是兩行文字之間基線的距離。
文字的基線，指的是如果為文字加上底線，那麼上下劃線就是文字的基線。
Line-height的值設定為具體的數值，可以是相對數值，也可以設定為絕對數值，在靜態頁面中，文字大小固定時常常使用絕對數值，而對於論壇和部落格這些用戶可以自訂字體大小的頁面，通常設定為相對數值，從而，可以隨著使用者自訂的字體大小改變對應的行間距。
<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>程式碼如上，第一段文字採用了絕對數值，且行間距設定的比文字大小還要小，因此，文字發生了部分重疊的現象。
第二段和第三段，分別設定了不同的文字大小，但由於使用了相對數值，因此，能夠自動的調節行間距。
CSS設定字間距
CSS中透過letter-spacing屬性來調整字間距，這個屬性同樣可以設定相對數值和絕對數值。
<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> 程式碼如上，可以看到文字間距屬性letter-spacing除了可以使用相對數值和絕對數值外，還可以使用負數來實現文字重疊的效果。
【推薦學習：css影片教學】
以上是CSS如何設定行間距和字間距的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：CSS如何設定div水平居中下一篇：CSS如何設定div水平居中