CSS中的行高(line-height)是指文本行的高度,它以元素的字體高度為基礎來計算。每個行之間的距離都被稱作行間距,它是由行高減去字體高度所得出的數值。
行高可以設置為一個定值,也可以用百分比表示,比如:
p { line-height: 1.5; /* 行高為字體高度的1.5倍 */ } h1 { line-height: 150%; /* 行高為字體高度的150% */ }
如果字體大小不同,那么行高也會自動調整。比如在下面的例子中,雖然p和h2元素使用的是不同字體大小,但是它們的行高卻是相同的。
p { font-size: 16px; line-height: 24px; /* 行高為字體高度的1.5倍 */ } h2 { font-size: 20px; line-height: 30px; /* 行高為字體高度的1.5倍 */ }
行高還有一個重要的作用,就是用來設置垂直居中。當我們將行高設置為元素的高度時,就可以實現垂直居中的效果。比如下面的例子:
div { width: 200px; height: 100px; line-height: 100px; /* 行高等于元素的高度 */ text-align: center; }
在上面的例子中,我們將一個div元素的行高設置為100px,即等于元素的高度。然后使用text-align屬性將文本居中,這樣就可以實現水平垂直居中的效果。