[CSS] 關於 line-height 的行距觀念

在寫 CSS 時有時為了讓行距之間撐開，會設定 line-height 我最常設定的是
line-height:1.5; 但我經常搞不太清楚到底這樣的行距是多高 ?只是它看起來感覺是我要的行距就好了，但是這個小細節如果不弄清楚卻有可能導致後續的版面破版或出現可能要找很久的 bug 於是就寫了一篇記錄一下，日後忘記了也可以在回頭看看。

其實所有的行距預設都是 1

上面這段話是什麼意思呢？假設我們設定一個 p 段落，裡面的文字大小是 20px 此時如果沒有設定行距那預設每個行高都是文字大小 1 倍也就是 20px 的距離，像是下圖這個概念：

行距一倍的大小，一倍就是設定的文字大小距離

如果行距是 line-height:0; 結果就是所有文字重疊再一起等於沒有行高了！

沒有行距所有會擠在一起

如果行距設定 30px 那行高是多少？

如果今天文字大小設為 20px ，行距為 line-height: 30px; 過去我的認知是 20px 的文字大小，往下還會多出 30px 的空間就像下圖一，直到上了六角學院的直播班課程才導正了我的認知，事實是圖二的模樣。

行高 1.2 又是多高呢？

line-height 除了可以設定 px 值，也可以設定文字的幾倍高，前面提高預設都是文字大小的 1 倍 line-height :1 如文字是設定 20px， line-height ：1.2 呢那他的計算方式為 20*1.2 =24px 那實際的行高如下圖：

相當於每個行高是文字大小的 1.2 倍高度

最後驗收

如果文字大小為 16px ， line-height :3 試問下面的 demo 的總共高度為多少

答案是 192px ，計算方式如下：
文字大小16 ＊行高為文字大小的3倍＊總共在瀏覽器占據 4 行
16＊3 ＊4 = 192px 為總高度。

補充

如果我們希望某個區域的行距都是一樣高可以在父層設定 line-height ，這樣裡面的文字段落行距就都一樣了，除非今天某個 p 段落自己要有特殊的行距，那就可以另外在這個段落再設定一個 line-height，如以下程式碼

以上為個人學習整理筆記如有錯誤歡迎告知，謝謝!
如果這篇文章有稍微幫到你釐清觀念也可以在下方給我拍手讓我知道喔。