CSS中line height和height的區別

2021-08-08 22:13:11 字數 1041 閱讀 6747

line-heigth是行高的意思,它決定了元素中文字內容的高度,height則是定義元素自身的高度。

如:

測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字p>

假如定義p標籤的行高為line-heigth:20px; 文字在瀏覽器中顯示為一行時,這個p標籤的高度會為20px,如果為兩行,則p標籤的高度為40px;

行高20px; 

行高變為40px; 

但是,我們定義p的樣式為height:20px,那麼這個元素的高度並不會因為內容的多少而改變,如果顯示為2行,文字的總高度超出了,這個p標籤的高也不會隨著文字而改變。

height:20px;折行後文字超出了元素 

技巧一 

行高等於元素高,可將文字內容垂直居中

p

測試文字p>

行高盡量不要大於元素高。如果行高大於元素高,多個相同的結構下很容易出現錯位 

技巧二 

設定高度和瀏覽器一樣高 

效果: 

你設定高為100%,再設定邊是不起作用的。需要把html和body一起設定為100%,完整**如下

html,body

body

寫在< style >中就可以了。

CSS中line height和height的區別

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

CSS中line height繼承問題

在css中,line height屬性用於設定多行元素的空間量,比如文字。對於塊級元素,它指定元素行盒的最小高度。對於非替代的inline元素,它用於計算行盒的高度。keyword value line height normal unitless values use this number mu...

學習筆記 css中的line height

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