css中height和line-height區別

2024-07-11 08:30:41

字體：大中小

來源：轉載

供稿：網友

line-height：行高設置文字間上下距離
height：高度就是定義一個層或某樣東西的高度啦

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

文字放大后邊緣會重疊？

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

當字體放大且沒有設置元素的line-height（繼承自父元素且父元素為固定值）或者其值為固定值就會出現文字超出行高范圍出現重疊。

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

這樣行高會隨著字體縮放跟著縮放。

如何設置文字圖片行內居中？

line-height默認是baseline對其的，可以使用vertical-align:middle使其文字圖片居中對齊。

如何更加易讀？

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

input button 各個瀏覽器表現一致。

firefox默認的linde-height值默認為normal，需要明確指定。

復制代碼

代碼如下:
button, input[type="button"], input[type="submit"] {
line-height:normal !important;
}
input.button, a.button, button {
font: bold 12px Arial, Helvetica, sans-serif;
padding: 5px 8px;
overflow:visible;
}

上一篇：多行排列圖片時hover上去加邊框擠圖片的解決方法兼容IE7+

下一篇：CSS中filter濾鏡的學習筆記(靜態濾鏡及動態濾鏡)