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