在CSS中,我們可以使用line-height
屬性來設置行間距。
p { line-height: 1.5; /* 設置行間距為字體大小的1.5倍 */ }
其中,行間距的計算方式為:字體大小 xline-height
值。例如,如果字體大小為16px,line-height
值為1.5,則行間距為24px。
除了使用具體的數值來設置行間距,我們還可以使用相對單位來設置。比如:
p { line-height: 1.2em; /* 設置行間距為字體大小的1.2倍 */ }
這里的em
單位是相對于當前元素的字體大小來計算的。因此,無論字體大小如何變化,行間距都會保持相對一致。
需要注意的是,line-height
的設置會影響到塊級元素的高度,因此在進行布局時需要注意。如果只想更改某個元素的行間距而不影響其高度,可以考慮使用line-height
的子元素繼承屬性來實現:
.parent { line-height: 1.5; } .child { line-height: inherit; /* 繼承父元素的line-height屬性值 */ }
這樣,子元素的行間距就與父元素保持一致,不會影響其高度。
上一篇CSS規定的樣式表優先級
下一篇css規則的三種類型區別