首頁 >web前端 >html教學 >line-height和height的區別實例詳解

line-height和height的區別實例詳解

WBOY
WBOY原創
2017-06-28 11:58:112862瀏覽

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; 
}


以上是line-height和height的區別實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn