在CSS中,我們可以使用行高(line-height)屬性來(lái)設(shè)置一個(gè)元素中文本的行距。行高是指每一行文字頂部和底部之間的距離,它不僅影響文字的排版美觀度,還能調(diào)整元素高度和垂直對(duì)齊。
/* 設(shè)置行高為20px */ p { line-height: 20px; }
上述代碼設(shè)置了p標(biāo)簽中文字的行高為20像素,這會(huì)使每行文字的頂部和底部分別向上和向下移動(dòng)10像素。在多行文本的情況下,行高改變也會(huì)影響到整個(gè)元素的高度,所以要根據(jù)設(shè)計(jì)需求和字體大小進(jìn)行適當(dāng)設(shè)置。
/* 設(shè)置行高為1.5倍字體大小 */ p { line-height: 1.5; }
上述代碼將行高設(shè)置為字體大小的1.5倍,這意味著每行文字的高度會(huì)比字體大小多出一半,這種設(shè)置方式能夠讓文本更美觀并且更容易閱讀。
在一些情況下,我們需要讓不同行之間的行距有所區(qū)別,比如段落之間需要留出一定的間隔。這時(shí)就需要使用垂直間距(vertical spacing)來(lái)調(diào)整行與行之間的距離。
/* 設(shè)置前后兩個(gè)段落之間的行距為20px */ p + p { margin-top: 20px; }
上述代碼設(shè)置了兩個(gè)p標(biāo)簽之間的垂直距離為20像素,這樣可以讓段落之間有一定的間隔效果。