CSS 之 line height如何繼承

2022-06-08 19:45:12 字數 587 閱讀 2006

line-height繼承,一共有以下3種情況:

html**

<

body

>

<

p>這是一行文字

p>

body

>

1. 寫具體數值,則直接繼承該值。

body p

元素 line-height 直接繼承50px

2. 寫比例,如2 或者1.5 等,則繼承該比例。

body p

元素 line-height 直接繼承比例,

元素line-height = 2(比例)* 10px(font-size)= 20px

3. 寫百分比,如200%,則先計算再繼承算出來的值。(差分點)

body p

元素 line-height 繼承計算後的值,

元素line-height = 200%(百分比)* 20px(父元素的font-size)= 40px

CSS篇之巧用line height

公司乙個頁面中的乙個樣式如下,使左邊文字豎直排列且水平垂直居中 已中止 left tit一般情況,我會用padding 如上 或者用position transform margin使文字豎直排放看起來居中,但是這樣不夠智慧型或顯得比較冗餘。偶然發現,其實用line height就能不用具體控制pa...

深入理解css之line height

行高,顧名思義是一行文字的高度,而從規範上來說則是兩行文字基線之間的距離。行高是作用在每乙個行框盒子 line box 上的,而行框盒子則是由內聯盒子組成,因此,行高與內聯元素可以說是非常緊密,行高直接決定了內聯元素的高度 注意 這裡的內聯元素不包括替換元素 對於塊級元素和替換元素,行高是無法決定最...

CSS中line height和height的區別

css中的line height一般指的是布局裡面的一段文字,上下行之間的高度,比如第一行文字頂部到第二行文字的頂部,這就為行高。height一般指的是容器的整體高度。那麼line height和height有什麼區別呢?如果乙個div容器高度是20px,字型是12px,那可以顯示完全顯示一整行的文...