編碼的世界 / 優質文選 / 生涯

CSS設置行間距和字間距 萬次閱讀


2022年5月26日
-   

CSS設置行間距


CSS中通過line-height屬性來實現行間距的設置,line-height的值表示的是兩行文字之間基線的距離。
文字的基線,指的是如果給文字加上下劃線,那麼上下劃線就是文字的基線。
Line-height的值設置為具體的數值,可以是相對數值,也可以設置為絕對數值,在靜態頁面中,文字大小固定時常常使用絕對數值,而對於論壇和博客這些用戶可以自定義字體大小的頁面,通常設置為相對數值,從而,可以隨著用戶自定義的字體大小改變相應的行間距。
<html>
<head>
<title>
行間距
</title>
<style type="text/css">
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>

代碼如上,第一段文字采用了絕對數值,並且行間距設置的比文字大小還要小,因此,文字發生了部分重疊的現象。
第二段和第三段,分別設置了不同的文字大小,但是由於使用了相對數值,因此,能夠自動的調節行間距。

CSS設置字間距


CSS中通過letter-spacing屬性來調整字間距,這個屬性同樣可以設置相對數值和絕對數值。
<html>
<head>
<title>
字間距
</title>
<style type="text/css">
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 class="one">文字間距1,負數</p>
<p class="second">文字間距2,相對數值</p>
<p class="third">文字間距3,相對數值</p>
</body>
</html>


代碼如上,可以看到文字間距屬性letter-spacing除了可以使用相對數值和絕對數值外,還可以使用負數來實現文字重疊的效果。

div css文字字體行高行距 深入理解css行間距設置


在文章中,要實現調節設置每行文字字體間距(行距)是使用line-height屬性。 要使得每行的文字一定的間距距離所以可以通過line-height樣式實現。接下來通過DIV CSS實例實現字體文字上下間距。 為了觀察到行距設置效果,新建兩個div盒子對象,分別div命名為“.divcss5-a”和“.divcss5-b”。
1、div+css實例完整HTML代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>divcss5 css行間距實例</title>
<style>
.divcss5-a{ line-height:22px}/* css 注釋說明:設置行距行高22px */
.divcss5-b{ line-height:40px}/* 設置行距行高22px */
</style>
</head>
<body>
<div class="divcss5-a">
我被設置行高22px
<br /> 我行距為22培訓
<br /> DIVCSS5占位內容
</div>
<div class="divcss5-b">
我被設置行高40px
<br /> 我行距為40培訓
<br /> DIVCSS5占位內容
</div>
</body>
</html>

設置了兩個盒子分別css行高間隔設置為22px40px,大家可以複制以上代碼進行實踐觀察效果掌握css設置對象內字體文字上下行間距。掌握設置行間距行高代碼是什麼。
2、css div行高行間距效果截圖

3、總結
要實現上下換行文字行間距行高樣式其實我們只用對文字所在對象設置line-height樣式即可,一般行距值設置大於14px以上即可,根據css字體大小,css行高值不能小於字體值,不然行距設置值比字體大小值小後字體會重疊一部分,形成不兼容效果。
https://blog.csdn.net/yenange/article/details/8251187
https://www.cnblogs.com/fengzhentian/p/4576336.html
https://www.cnblogs.com/nelsonlei/archive/2017/12/28/8134655.html

熱門文章