CSS中line height繼承問題

2022-05-19 06:49:02 字數 1197 閱讀 5346

在css中,line-height屬性用於設定多行元素的空間量,比如文字。對於塊級元素,它指定元素行盒的最小高度。對於非替代的inline元素,它用於計算行盒的高度。

/* keyword value */

line-height: normal;

/* unitless values: use this number multiplied

by the element's font size */

line-height: 3.5;

/* values */

line-height: 3em;

/* values */

line-height: 34%;

/* global values */

line-height: inherit;

line-height: initial;

line-height: unset;

normal取決於使用者端。桌面瀏覽器(包括firefox)使用預設值,約為1.2,這取決於元素的font-family

《數字》該屬性的應用值是這個無單位數字《數字》乘以該元素的字型大小。計算值與指定值相同。大多數情況下,這是設定line-height的推薦方法,不會在繼承時產生不確定的結果。

《長度》指定《長度》用於計算line box的高度。檢視《長度》 獲取可能的單位。以em為單位的值可能會產生不確定的結果。

《百分比》與元素自身的字型大小有關。計算值是給定的百分比值乘以元素計算出的字型大小。百分比值可能會帶來不確定的結果。

經過測試,上述的幾種形式中,帶單位的取值會被子元素繼承,只有不帶單位(如1.2)或者normal不會被繼承。

測試**:

測試結果:

參考文獻:

line-height

CSS中line height和height的區別

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

CSS中line height和height的區別

line heigth是行高的意思,它決定了元素中文字內容的高度,height則是定義元素自身的高度。如 測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字p 假如定義p標籤的行高為line heigth 20px 文字在瀏覽器中顯示為一行時,這個p標籤的高度會...

學習筆記 css中的line height

又已經快十天沒有寫文章了,一周一篇其實好艱難的說 本來想接著上篇事件 上篇 總結事件型別的,可是看完之後整理下還是有點亂,就一直拖著沒寫 實在是不能再拖下去了,今天就簡單說說css中我們常用但又不一定真正了解的line height屬性。行高是指文字行基線間的垂直距離。那什麼是基線呢?記不記得ver...