使用CSS Line-Height屬性獲取CSS行間距
了解如何使用CSS樣式屬性line-height來影響網頁上的行間距。
CSS行距的值
CSS行間距受CSS樣式屬性行高影響。 該屬性最多需要5個不同的值：
- 正常：瀏覽器確定與字體大小相關的行間距值。 這通常與字體大小相同或略大（如20％）。
- 繼承：行間距應取自父元素的行間距。 因此，如果將身體標記的行高設置為比字體大小大30％，並將其中的段落標記設置為繼承，則它們的線高也會比字號大30％。
- 一個數字：如果行高值沒有度量單位，則認為它是行高的字體大小的乘數。 所以1.25的行高將比字體大25％。
- 長度：如果行高值具有度量單位，那麼行間應該有確切的空間量。 所以，1.25毫米會導致線1.25毫米分開。
- 百分比：如果行高是百分比，那將是字體大小的百分比。 所以125％的線高度會比字體大25％。
你應該使用哪一個值用於CSS行距？
在大多數情況下，行間距的最佳選擇是使其保持默認 - 或“正常”。 這通常是最具可讀性的，並不要求你做任何特別的事情。 但改變行間距可以讓你的文字有不同的感覺。
如果你的字體大小被定義為ems或百分比，那麼你的行高也應該這樣定義。 這是行距最靈活的形式，因為它允許讀者調整字體大小，並保持行間距相同的比例。
用點（pt）值設置打印樣式表的行高。 這個點是一個打印度量，所以你的字體大小也應該是點數。
我不喜歡使用號碼選擇，因為我發現它最容易讓人感到困惑。 許多人認為這個數字是一個絕對的大小，所以他們使它變得龐大。 例如，您可能將字體設置為14px，然後將行高設置為14，這會導致行之間出現巨大間隙 - 因為行間距設置為字體大小的14 倍 。
多少空間應該用於你的線距
正如我上面提到的，我建議使用默認行距，除非您有特定的理由來改變它。 更改行間距可能會產生不同的效果：
- 文字非常緊密可能難以閱讀。 但是小的空格可能會影響文本的情緒。 如果文本一起縮小，可以使文本的意義看起來更暗或更緊張。
- 分開的文字也很難閱讀。 但寬廣的空間使文字看起來更流暢，更流暢。
- 改變行間距可以使文字無法在空間中更加緊湊或占用更多空間。