作者:WangMin 格言:努力做好自己喜歡的每一件事 對於初學CSS的同學來說，會有很多屬性相關的疑問，行高屬性 line-height一定是其中一個，因為它是CSS中非常重要的一個屬性，這個屬性改變元素在網頁中的行高，讓你的網頁看起來更加整潔，美觀。 什麼是行高？ CSS中的行高（line-he ...
作者:
WangMin
格言:努力做好自己喜歡的每一件事
對於初學CSS的同學來說，會有很多屬性相關的疑問，行高屬性 line-height一定是其中一個，因為它是CSS中非常重要的一個屬性，這個屬性改變元素在網頁中的行高，讓你的網頁看起來更加整潔，美觀。
什麼是行高？
CSS中的行高（line-height）是指網頁中每行文字之間的距離，就是對於同一行內的不同內容，行高決定它們之間的間距。
換一句話來說，在CSS中包括文字的每一行不是只有文字的高度，其實還有上間距、下間距，所以行高指的是文字的高度+上下間距。
合理設置文字行高不僅能夠讓網頁更加美觀與整潔，還能夠增加用戶的視覺與閱讀體驗，在大段文字中，合適的行高可以讓用戶閱讀起來更加舒適。
你可能還是不明白行高是什麼？下麵我通過幾圖來仔細給大家講一下吧！
那麼在學習行高之前，我們就必須要知道在文本中存在有四條線: 頂線、中線、基線、底線，之後才能真正的去理解line-height屬性的含義! 如下圖：
頂線，在中文漢字的頂部位置就是頂線的位置！就是圖中綠色線條所在的位置
中線，css中有一個概念叫x-height，意思是小寫字母x的高度! 在css中，有些屬性值的定義就和這個x-height有關, 最有代表性的就是vertical-align的屬性值middle。這裡的middle就是中間的意思，指的其實就是基線 往上1/2的位置，也就是小寫x字母的中間交叉點那個位置！這裡橫過小寫英文字母x中間交叉點的線就是中線。就是圖中藍色線條所在的位置
基線，要瞭解基線 ，需要知道在英文中的26個字母當中 ，有一個小寫的x字母在CSS中是相當特殊的，基線就是小寫x字母的下邊緣(線) ！ 就是圖中紅色線條所在的位置
底線，在中文漢字的底部位置 就是底線的位置 ！就是圖中紫色線條所在的位置
那麼從上圖中我們就可以看到其實行高指的是上下文本行的兩條基線之間的距離，即圖中兩條紅線之間的距離。
看到這裡你應該明白行高了吧！接下來就一起來看看它在CSS中是如何表示的，以下是它的幾種表示方式。
設置字體的行高的方法
1、使用像素（px）單位設置行高
使用像素單位設置行高是最常見的方法，也是最容易理解的。可以通過以下方式來設定行高
<style>
p{
font-size: 16px;
line-height: 32px;
}
</style>
設置行高之前：
設置行高之後：
你可以看到每行文字之間明顯出現了一定的距離，對比之下，一定是設置行高之後文字看起來更加清晰。
在上述例子中，字體大小font-size為16px，行高line-height為32px，也就是說一行文字的高度為32個像素。用這種方式設置行高時，行高最好是文字大小的2倍。當然這不是強制性的，你可以根據自己的需求來調整。
這個設置可以適用於大多數情況下，但是需要註意的是，在不同的字體類型和字體大小的情況下，可能顯示出不同的效果。這裡我並沒有設置字體類型，預設字體類型是' 微軟雅黑 '。
但這種方式有一個缺點，當文字大小發生較大的改變時，固定的行高會讓文字之間看起來會很緊湊，如下：
<style>
p{
font-size: 20px;
line-height: 16px;
}
</style>
這個時候以下幾種方式就可以解決這個問題，一起往下看吧！
2、使用百分比（%）單位設置行高
使用百分比單位可能更加靈活，它可以自適應不同的字體大小。在下麵的案例中，我們設置字體大小為20px，行高為150%：
<style>
p{
font-size: 20px;
line-height: 150%;
}
</style>
這裡的行高150%的意思是相當於將行高設置為字體大小的1.5倍，即20 * 1.5 = 30px。那麼行高200%就相當於行高是字體大小的2倍，即行高 = 字體大小 * 2。
以這種方式設置行高時，常常行高設置為150%或者200%，即 line-height: 150%; 或 line-height: 200%;
這種方法可以確保每個字體大小的行高都相同，並適用於任何比例。
3、使用單位 em 設置行高
使用em單位是讓行高基於當前元素文字大小來設置，因為em單位是相對於當前元素的字體大小設置的，行高會隨著字體大小改變。下麵的案例設置line-height為1.5個em
<style>
p{
font-size: 16px;
line-height: 1.5em;
}
</style>
在這種情況下，當文字大小為16px時，行高為 16 * 1.5 = 24px。但是當你改變字體大小時時，例如font-size: 20px;，line-height也會相應發生變化，為20 * 1.5 = 30px。
一般情況下，設置line-height的值為1.5 em ~ 2 em 比較合適。
用這種方式設置行高時，實際行高 = 字體大小 * em單位前面的數值。它的效果跟第二種方式是一樣的。
4、使用無單位數值設置行高
使用無單位的數字設置行高其實是最靈活的方法，它也可以自適應任何字體大小的文本。在下麵的案例中，我們將line-height設置為1.5
<style>
p{
font-size: 16px;
line-height: 1.5;
}
</style>
其實這種方式更第二、三種方式是一樣的，這裡的行高將是字體大小的1.5倍，當字體大小為16px時，行高為 16 * 1.5 = 24px。使用這種方式是最靈活和最可維護的設計方法之一，它可以適用於大多數情況。一般情況下，設置line-height的值為1.5 ~ 2 比較合適
在上述第二、三、四種設置行高的方式中，字體大小是影響文字高度的關鍵因素，當文字大小發生改變時，相應的行高也會發生改變。也就是說我們通過設置字體的大小，可以間接地控制文字的高度。
需要註意的兩點：
1）如果不設置行高，則會應用預設的行高，這個值可以因不同瀏覽器而異。
2）行高不能為負值。
以上四種方法都有各自的優缺點，你可以根據實際情況來選擇。不管你使用哪一種方法，都需要按照設計要求來修改line-height值，從而達到更好的文本排版效果。
以上僅是個人見解，若有不足之處歡迎在下方評論指出，那就先分享到這裡!!
