注：測試浏覽器版本号——chrome 75.0.3770.80；opera 60.0.3255.109；firefox 67.0；ie 11。

今天将設計稿還原成html頁面，在設置 字母間距/字間距/行間距/首行縮進 時發現了一些有趣的冷知識，雖然冷門，但是弄懂了也很有用呀！

1 字母間距

字母間距，顧名思義就是字母之間的間距。這個通常用于全大寫英文标題。我們使用letter-spacing來設置。以下面代碼為例：

<!-- 字母間距 --> <p style="letter-spacing: 2px">english test</p> <p style="letter-spacing: 0.5px">english test</p> <p >english test</p> <p style="letter-spacing: -0.5px">english test</p> <p style="letter-spacing: -2px">english test</p> <p style="letter-spacing: 2px">中文測試</p> <p style="letter-spacing: 0.5px">中文測試</p> <p >中文測試</p> <p style="letter-spacing: -0.5px">中文測試</p> <p style="letter-spacing: -2px">中文測試</p>

得到結果如下圖。由此可見letter-spacing是以字母為單位計算間距，如果是中文的話以單個中文字為單位計算。

2 字間距

字間距是單詞與單詞之間的間距，使用word-spacing來設置。以下面代碼為例：

<!-- 字間距 --> <p style="word-spacing: 10px">english test</p> <p style="word-spacing: 5px">english test</p> <p >english test</p> <p style="word-spacing: -5px">english test</p> <p style="word-spacing: -10px">english test</p> <p style="word-spacing: 10px">中文測試</p> <p style="word-spacing: 5px">中文測試</p> <p >中文測試</p> <p style="word-spacing: -5px">中文測試</p> <p style="word-spacing: -10px">中文測試</p> <p style="word-spacing: 10px">中文 測試</p> <p style="word-spacing: 5px">中文 測試</p> <p >中文測試</p> <p style="word-spacing: -5px">中文 測試</p> <p style="word-spacing: -10px">中文 測試</p>

得到結果如下圖。通過對照組實驗我們可以發現word-spacing屬性其實是根據文本中的空格來區分單詞的，這點我們需要注意。

3 行間距

我們使用line-height來設置行間距，其是屬性值如下

line-height:normal(默認) | number | length | percentage | inherit

屬性值分别代表的含義是：1. 常規合理值；2. 數值（不帶單位 此時間距=數值*font-size）；3. 具體值（帶單位）；4. 百分比（相對于當前元素的font-size）；5. 繼承。

以下面代碼為例：

<!-- 行間距 --> 父元素設置了行間距 <div style="line-height: 50px"> <p style="line-height: 0.5">english test</p> <p style="line-height: 10px">english test</p> <p >english test</p> <p style="line-height: 50%">english test</p> <p style="line-height: inherit">english test</p> </div> 父元素未設置行間距 <div> <p style="line-height: 0.5">english test</p> <p style="line-height: 310px">english test</p> <p >english test</p> <p style="line-height: 50%">english test</p> <p style="line-height: inherit">english test</p> </div>

得到結果如下圖。通過檢查元素可以發現：1. normal和inherit取值是一樣的，父元素沒有設置line-height值就normal，父元素有設置line-height值就繼承；2. chrome計算行間距時會出現偏差，如本例中line-height值為0.5/10px/50%時，其行高均為9.6px，而不是設想的10px，該現象在其他測試浏覽器中均為出現；3. 設置行間距後，該元素垂直方向居于中間，不管元素的字體多大，其占據的高度是行間距的數值。

通過以上實驗我們還有一個比較重要的問題沒有解決——當line-height屬性值為normal時（父元素未設置line-height屬性值），元素行間距到底時多少？

首先一點可以确定的是：當font-size相同的情況下，font-family不同，行間距不同，而且沒有規律。這點我們暫時不讨論，我們需要讨論的是當font-family相同而font-size不同時，行間距有沒有什麼變化規律？我們設置以下實驗組和對照組。

<!-- 設置font-family:'Times New Roman'; --> <p style="font-size: 10px">english test</p> <p style="font-size: 20px">english test</p> <p style="font-size: 30px">english test</p> <p style="font-size: 40px">english test</p> <p style="font-size: 50px">english test</p> <p style="font-size: 60px">english test</p> <p style="font-size: 70px">english test</p> <p style="font-size: 80px">english test</p> <p style="font-size: 90px">english test</p> <p style="font-size: 100px">english test</p>

整理結果得到下圖中fong-size與line-height的關系數據表格及折線圖。由圖我們發現：1. 不同浏覽器的結果不同但近似；2. font-size越大，對應的line-height越大，且近乎呈線性關系；3. ie中font-size與line-height呈線性關系，且line-height=1.15*font-size。

4 首行縮進

沒有什麼特别困難的點，我們隻需要記住用法就可以了。

text-indent: length(默認為0) | percentage(當前元素寬度百分比) | inherit（繼承）;

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!