CSS中的line-height行高屬性學習教程

2024-07-11 08:25:43

字體：大中小

來源：轉載

供稿：網友

基本概念
1.行高、行距
行高是指文本行基線間的垂直距離。那什么是基線呢？記不記得vertical-align屬性有個baseline值，這個baseline就是基線。看張“盜圖”（選自下面的參考文章），其實我也修改了一下啦~
201666110532902.png (739×350)

注意：倒數第二根是基線哦，最下面那根是底線，不是基線。
圖中兩條紅線之間的距離就是行高（line-height），上一行的底線和下一行的頂線之間的距離就是行距，而同一行頂線和底線之間的距離是font-size的大小，行距的一半是半行距，半行距、font-size、line-height之間的關系看圖片的右下角就一目了然了~

復制代碼

代碼如下:半行距 = （line-height - font-size）/2

當然，半行距也可能為負值（當line-height < font-size），這時候兩行之間就會重疊，如下圖所示：
201666110634938.png (340×87)

2.四種box
要說的4種盒子分別是inline box、line box、content area、containing box ~
1.inline box (行內框)：每個行內元素會生成一個行內框，行內框是一個瀏覽器渲染模型中的一個概念，無法顯示出來，行內框的高度等于font-size，設定line-height時，行內框的高度不變，改變的是行距。
2.line box （行框）：行框是指本行的一個虛擬的矩形框，由該行中行內框組成。行框也是瀏覽器渲染模式中的一個概念，無法顯示出來。行框高度等于本行中所有行內框高度的最大值。當有多行內容時，每一行都有自己的行框。
3.content area （內容區）：內容區是圍繞著文字的一種box，無法顯示出來，其高度取決于font-size和padding。個人覺得：內容區的高度 = font-size + padding-top + padding-bottom，有待查證，也期待小伙伴們給出答案~
4.containing box containing box：是包裹著上述三種box的box，有點繞哈~看圖
201666110708000.png (530×174)