對line-height 的理解及其賦值方式
阿新 • • 發佈：2022-05-31
line-height的概念：
line-height 指一行文字的高度，包含了字間距，上間距、下間距，實際上文字行基線間的垂直距離；
如果一個標籤沒有定義 height 屬性，那麼其最終表現的高度由 line-height 決定；
一個容器沒有設定高度，那麼撐開容器高度的是 line-height，而不是容器內的文字內容；
把 line-height 值設定為 height 一樣大小的值可以實現單行文字的垂直居中；
line-height 和 height 都能撐開一個高度；
line-height 的賦值方式：
帶單位：px 是固定值，而 em 會參考父元素 font-size 值計算自身的行高
純數字：會把比例傳遞給後代。例如，父級行高為 1.5，子元素字型為 18px，則父元素行高為 1.5 * 18 = 27px
百分比：將計算後的值傳遞給後代
把 line-height 值設定為 height 一樣大小
<html> <style> div { width: 150px; height: 100px; background-color: yellow; } span { line-height:100px; }</style> <body> <div> <span> This is a test </span> </div> </body> </html>