CSS里的行高(line-height)是指行框盒子(inline box)的高度,也就是一行中文本內容所占的最小高度。它不同于行間距(line spacing),后者是指兩行文字間隔的距離。
行高可以通過相對值(如em)或絕對值(如px)來設置。一個常見的錯誤是將行高設置為具體數值,而不是相對值。這樣會導致在不同設備、不同瀏覽器以及不同字體大小下,行高失去比例。
/* 不好的設置方式 */ p { font-size: 16px; line-height: 20px; } /* 好的設置方式 */ p { font-size: 16px; line-height: 1.5; }
在設置行高時,我們也需要考慮行框盒子之間的垂直對齊方式。默認情況下,行框盒子是基于基線(baseline)對齊的。如果我們想讓行框盒子居中或頂部對齊,需要通過vertical-align屬性來實現。
同時,大多數瀏覽器還會在行框盒子的上下方添加一些padding或margin,我們可以通過設置padding和margin來調整這些間距。
/* 調整行框盒子的上下間距 */ p { padding-top: 5px; padding-bottom: 5px; } /* 將行框盒子頂部對齊 */ img { vertical-align: top; } /* 將行框盒子居中對齊 */ span { display: inline-block; vertical-align: middle; }
在CSS中,理解行高的概念并且正確設置行高是非常重要的。它可以使我們的文本更加易于閱讀,同時還可以為我們的設計提供更多的空間與自由度。