在css中,可以使用line-height屬性來設定行高,只需要給指定元素添加“line-height:行高值;”樣式即可,例如“line-height: 10px;” 。 line-height屬性可以設定行間的距離(行高),不允許使用負值。
本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
所謂行高是指文本行基線間的垂直距離。要理解這句話首先得了解幾個基本知識:
頂線、中線、基線、底線
<!DOCTYPE html> <html> <head> <title>Test</title> <style type="text/css" > span { padding:0px; line-height:1.5; } </style> </head> <body> <div class="test"> <div style="background-color:#ccc;"> <span style="font-size:3em;background-color:#999;">中文English</span> <span style="font-size:3em;background-color:#999;">English中文</span> </div> </div> </body> <html>
從上到下四條線分別是頂線、中線、基線、底線,很像才學英文字母時的四線三格,我們知道vertical-align屬性中有top、middle、baseline、bottom ,就是和這四條線相關。
尤其記得基準不是最下面的線,最下面的是底線。
行高、行距與半行距
#行高是指上下文本行的基準間的垂直距離,即圖中兩條紅線間垂直距離。
行距是指一行底線到下一行頂線的垂直距離,即第一行粉線和第二行綠線間的垂直距離。
半行距是行距的一半,即區域3垂直距離/2,區域1,2,3,4的距離總和為行高,而區域1,2,4距離總和為字體size,所以半行距也可以這麼算:(行高-字體size)/2
#內容區、行內框、行框
內容區:底線和頂線包裹的區域,即下圖深灰色背景區域。
行內框,每個行內元素會產生一個行內框,行內框是一個瀏覽器渲染模型中的一個概念,無法顯示出來,在沒有其他因素影響的時候(padding等),行內框等於內容區域,而設定行高時行內框高度不變,半行距【(行高-字體size)/2】分別增加/減少到內容區域的上下兩邊(深藍色區域)
行框(line box),行框是指本行的一個虛擬的矩形框,是瀏覽器渲染模式中的一個概念,並沒有實際顯示。行框高度等於本行內所有元素中行內框最大的值(以行高值最大的行內框為基準,其他行內框採用自己的對齊方式向基準對齊,最終計算行框的高度),當有多行內容時,每行都會有自己的行框。
<div> <span>中文English</span> <span>中文English</span> <span>English中文</span> <span>English中文</span> </div>
(學習影片分享:css影片教學)
line-height
基本概念搞清楚了我們就可以說說本文的主角line-height屬性了。
定義:line-height 屬性設定行間的距離(行高),且不能使用負值。此屬性會影響行框的佈局。在應用到一個區塊級元素時,它定義了該元素中基線之間的最小距離而不是最大距離。 line-height 與 font-size 的計算值之差(行距)分為兩半,分別加到一個文字行內容的頂部和底部。可以包含這些內容的最小框就是行框。
可能的值
值 | 说明 |
normal | 默认,设置合理的行间距。 |
number | 设置数字,此数字会与当前的字体尺寸相乘来设置行间距。相当于倍数 |
length | 设置固定的行间距。 |
% | 基于当前字体尺寸的百分比行间距。 |
inherit | 规定应该从父元素继承 line-height 属性的值。 |
示例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> p.small { line-height: 90% } p.big { line-height: 200% } </style> </head> <body> <p> 这是拥有标准行高的段落。 在大多数浏览器中默认行高大约是 110% 到 120%。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 </p> <p class="small"> 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 </p> <p class="big"> 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 </p> </body> </html>
效果图:
更多编程相关知识,请访问:编程视频!!
以上是css怎麼設定行高的詳細內容。更多資訊請關注PHP中文網其他相關文章!