資訊專欄INFORMATION COLUMN
摘要：行高行距半行距從上到下四條線分別是頂線，中線，基線，底線。行高指文本行基線間的垂直距離。上圖任意兩條相同顏色的垂直距離也是行高。父元素不同的行高單位影響子元素的繼承。
行高、行距、半行距
從上到下四條線分別是 頂線，中線，基線，底線。
行高指文本行基線間的垂直距離。上圖任意兩條相同顏色的垂直距離也是行高。
行高數(shù)值上等于 字體大小+行距，而行距的一半（半行距）加在頂線上方，一半加在底線下方。
指一行底線到下一行頂線的垂直距離。
半行距行距的一半。半行距 = (行高 - 字號) / 2
CSS 中的 margin-top 不是從文字的頂線算起的，而是從離頂線半個行距的上方開始算起的。同理，margin-bottom 是從離底線半個行距的下方開始算起的。
line-height 是可以繼承的。父元素不同的行高單位影響子元素的繼承。例如：
父元素的行高為 24px 時，子元素直接繼承此固定的行高
父元素的行高為 150% 或 1.5em 時，會根據(jù)父元素的字體大小先計算出行高值然后再讓子元素繼承
父元素的行高為 1.5 時，根據(jù)子元素的字體大小動態(tài)計算出行高值讓子元素繼承。
JSFiddle 源碼
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111429.html
摘要：內(nèi)聯(lián)盒子的高度由決定，限制包含盒子的高度，兩者一致，即把內(nèi)聯(lián)盒子安放在包含盒子內(nèi)，排除其他外界干擾。這時候由內(nèi)聯(lián)盒子模型可知，行間距是等分的，中間部分是，達(dá)到看似居中的效果?？梢缘玫浇Y(jié)論和設(shè)置一致，并非是完全垂直，除非為。 張鑫旭的CSS深入理解之line-height學(xué)習(xí)筆記 line-height的定義 行高：兩行文字基線之間的距離 為何是基線：基線是定義所有字線的根本 不同字體...
摘要：按照定義來解釋，就是兩行文字之間基線之間的距離。了解完基線的定義后，我們接著來聊行高。上面我們說過，行高就是兩條基線的之間的距離，如下圖所示。 1.寫在前面 兩個多周的時間沒有寫文章了，手好癢好癢，趁著公司在裝修，從上周末到本周都在家辦公，同時公司的項目并不緊急，于是抽著時間梳理了一下CSS中關(guān)于行高line-height的理解，今天發(fā)布出來，大家準(zhǔn)備好了嗎？ 2.基本概念 2.1行高...
摘要：行內(nèi)元素設(shè)置時，不論設(shè)置的多大，它的背景永遠(yuǎn)只跟隨文字的大小來渲染，但是行高的大小還是會體現(xiàn)的。行高對背景的渲染起作用行距行高字體大小半行距行高字體大小推薦文章 1:行內(nèi)元素設(shè)置line-height時，不論設(shè)置的多大，它的背景永遠(yuǎn)只跟隨文字的大小來渲染，但是行高的大小還是會體現(xiàn)的。 行高對背景的渲染不起作用 2:行內(nèi)塊和塊元素，背景顏色會隨著line-height的設(shè)置來給文字背景...
摘要：的應(yīng)用大部分時候，我們設(shè)置，都是為了垂直居中對齊。然后我們給設(shè)置，這樣我們就可以重置設(shè)置的，又因為保持了內(nèi)聯(lián)特性，因此我們可以設(shè)置以及產(chǎn)生，從而實現(xiàn)近似垂直居中對齊。 前言 行高，顧名思義是一行文字的高度，而從規(guī)范上來說則是兩行文字基線之間的距離。行高是作用在每一個行框盒子(line-box)上的，而行框盒子則是由內(nèi)聯(lián)盒子組成，因此，行高與內(nèi)聯(lián)元素可以說是非常緊密，行高直接決定了內(nèi)聯(lián)元...
閱讀 3664·2021-09-22 15:15
閱讀 3567·2021-08-12 13:24
閱讀 1314·2019-08-30 15:53
閱讀 1825·2019-08-30 15:43
閱讀 1188·2019-08-29 17:04
閱讀 2798·2019-08-29 15:08
閱讀 1586·2019-08-29 13:13
閱讀 3091·2019-08-29 11:06
