(0-6) CSS基礎篇 文字行高 (Line height)

行高設定概念

line-height 用來設文字行高，主要以數值設定為主，如 px 、em 、%。

假設文字設定為 20px ，行高設定為 60px，此時整行的空間為 60px，文字20px 則會在行中垂直居中。
表示一行的文字高度佔據 60px，兩行則是 120px。

像素(px)

使用 px 設定行高，會使行空間設定為固定像素值，缺點是當文字大小改變時，可能產生字級大於行高的情形。
一般專案不會使用像素，而是相對單位。

相對單位

可以使用 %(百分比)、em、數字，來設定行高。當設定行高為 300%、3em、3 時，文字若為 20px 則行高換算為 60px。
好處是文字大小改變時，行高會自動改變。

一般建議採用 純數字的方式設定。