所謂行高是指文本行基線間的垂直距離。要想理解這句話首先得了解幾個(gè)基本知識(shí)：頂線、中線、基線、底線。

從上到下四條線分別是頂線、中線、基線、底線，vertical-align屬性中有top、middle、baseline、bottom，就是和這四條線相關(guān)。基線不是最下面的線，最下面的是底線。

• 行高是指上下文本行的基線間的垂直距離，即圖中兩條紅線間垂直距離。
• 行距是指一行底線到下一行頂線的垂直距離，即第一行粉線和第二行綠線間的垂直距離。
• 半行距是行距的一半，即區(qū)域3垂直距離/2，區(qū)域1，2，3，4的距離之和為行高，而區(qū)域1，2，4距離之和為字體size，所以半行距也可以這么算：（行高-字體size）/2

• 內(nèi)容區(qū)：底線和頂線包裹的區(qū)域，即上圖深灰色背景區(qū)域
• 行內(nèi)框：每個(gè)行內(nèi)元素會(huì)生成一個(gè)行內(nèi)框，行內(nèi)框是一個(gè)瀏覽器渲染模型中的一個(gè)概念，無法顯示出來，在沒有其他因素影響的時(shí)候（padding等），行內(nèi)框等于內(nèi)容區(qū)域，而設(shè)定行高時(shí)行內(nèi)框高度不變，半行距【（行高-字體size）/2】分別增加/減少到內(nèi)容區(qū)域的上下兩邊（深藍(lán)色區(qū)域），行內(nèi)框的高度由font-size決定
• 行框（line box）：行框是指本行的一個(gè)虛擬的矩形框，是瀏覽器渲染模式中的一個(gè)概念，并沒有實(shí)際顯示。行框高度等于本行內(nèi)所有元素中行內(nèi)框最大的值（以行高值最大的行內(nèi)框?yàn)榛鶞?zhǔn)，其他行內(nèi)框采用自己的對(duì)齊方式向基準(zhǔn)對(duì)齊，最終計(jì)算行框的高度），當(dāng)有多行內(nèi)容時(shí)，每行都會(huì)有自己的行框。

line-height定義

line-height 屬性設(shè)置行間的距離（行高），不能使用負(fù)值。該屬性會(huì)影響行框的布局。在應(yīng)用到一個(gè)塊級(jí)元素時(shí)，它定義了該元素中基線之間的最小距離而不是最大距離。line-height 與 font-size 的計(jì)算值之差(行距)分為兩半，分別加到一個(gè)文本行內(nèi)容的頂部和底部。可以包含這些內(nèi)容的最小框就是行框。

轉(zhuǎn)載于:https://www.cnblogs.com/lmjZone/p/8523182.html

總結(jié)

以上是生活随笔為你收集整理的行高 line-height的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。