css中height和line-height區(qū)別

2024-07-11 09:05:42

字體：大中小

供稿：網(wǎng)友

這篇文章主要介紹了css中height和line-height區(qū)別,需要的朋友可以參考下

line-height：行高設(shè)置文字間上下距離
height：高度就是定義一個(gè)層或某樣?xùn)|西的高度啦

也就是說line-height是特指單行高度，height可以為所有元素的高度

文字放大后邊緣會(huì)重疊？

line-height直白理解就是文字高度加上文字上下的空白區(qū)域，line-height最好不要設(shè)置單位，如果固定單位后，行高就是確定值。

當(dāng)字體放大且沒有設(shè)置元素的line-height（繼承自父元素且父元素為固定值）或者其值為固定值就會(huì)出現(xiàn)文字超出行高范圍出現(xiàn)重疊。

line-height有繼承屬性，所以正文部分內(nèi)容line-height最好設(shè)置為為數(shù)字1.5，也就是字體高度*1.5的高度，

這樣行高會(huì)隨著字體縮放跟著縮放。

如何設(shè)置文字圖片行內(nèi)居中？

line-height默認(rèn)是baseline對(duì)其的，可以使用vertical-align:middle使其文字圖片居中對(duì)齊。

如何更加易讀？

行內(nèi)文字背景顏色#fff，文字顏色#333；文字周圍有空白line-height行高1.25-1.5，減少壓迫感，正文大小為14px，其它可以為12px。

input button 各個(gè)瀏覽器表現(xiàn)一致。

firefox默認(rèn)的linde-height值默認(rèn)為normal，需要明確指定。

復(fù)制代碼

上一篇：純css寫的評(píng)分鼠標(biāo)移入的效果附圖

下一篇：css line-height屬性的使用技巧