這個style 確實困擾著我，line-height 的指定會影響文字的高度，但它是以甚麼為基準呢？
查了一下網路文章，眾說紛紜，還是找了一下有利的線上文件
其實也有詢問 AI 但是回答的有點神秘，故還是看一下線上文件
MDN 的說明很不錯，以及方便檢視的互動體驗，更加了解設定值的表現
文字的實際高度(佔網頁上的空間)跟line-height 的設定有關，預設是1.2
若 body 僅有設定 font-size : 16px ; 則其他元素在沒有特別 font-size 的情況下，文字高度就會是
16*1.2 = 19.2px，所以使用預設 line-height 的情況下，多行文字的呈現，通常不會出現文字重疊
在一起的狀況(line-height 通常比 font-size 大)。
若我們故意指定 line-height 比 font-size 還小會出現甚麼問題，如下圖
了解了基本的 line-heightc 後，但我更想知道到底 line-height 是從文字的哪邊計算？在文件的下方有個連結
點進去後，找到 Figure 5
圖右方有個 line-height 的標示，代表 line-height 對應於文字的作用部分
有了這張圖，心中的疑惑就稀釋了不少
網路有很多文章說上下兩行文字的 baseline 到 baseline，小心有毒
參考
沒有留言:
張貼留言