CSS中的line-height屬性定義了一個行框內的行間距,也被稱為行高度。如果文本只顯示在一行中,則行高是文本的高度加上頂部和底部的填充。如果文本跨越多行,則行高還包括文本行之間的額外空間。
line-height可以使用絕對、相對或無單位的值。為了保持可讀性和易于維護,相對于元素的字體大小,使用基于em的相對尺寸。可以將line-height設置為1.5em以適當地分離文本行。
p { font-size: 16px; line-height: 1.5em; }
如果沒有設置line-height,則瀏覽器將使用默認行高度。在許多瀏覽器中,默認行高等于字體大小的約1.2到1.5倍。可以通過以下方式計算行高:
line-height = (line-height / font-size) * font-size;
如果將line-height設置為相同的值,則文本將垂直居中于其行框內。例如,如果希望文字在容器中居中,則可以使用以下CSS:
.container { height: 200px; display: flex; justify-content: center; align-items: center; }
此外,line-height還可以作為計算垂直間距的方法。例如,在一個段落中,可以使用以下CSS設置文字之間的垂直間距:
p + p { margin-top: 1.5em; }
在此代碼中,第二個p元素的頂部和第一個p元素的底部之間有1.5em的間距。
總之,line-height是CSS中一個非常重要的屬性,可以幫助我們控制文本的行高和垂直間距,使我們的設計更加美觀和易于閱讀。