iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 7
7
Modern Web

金魚都能懂的CSS必學屬性系列 第 7

Line-height - 金魚都能懂的CSS必學屬性

Line-height 的規則與概念

line-height基本上僅需指定一個值,其撰寫方式像是這樣

line-height: 1;

line-height的作用是設定文字的行高,其中設定的值多以數值為主,使用關鍵字則是使用通用關鍵字,像是「normal、inherit、initial、unset」這些,但實際上在Amos的網頁生涯中,是尚未用過關鍵字來設定就是了,既然line-height都是設定數值居多,那麼有哪些單位可以使用就很重要了,line-height數值的值可以使用的有以下這幾種

  • px (像素)
  • % (百分比)
  • 純數字(含小數點)
  • em

我們先暫時把空間切割成兩個部分來看,一個是「行」,一個是文字的空間,如果我們把每一個字都當成一個方塊來看的話,你的文字必須要完整的放置在這個方塊中,那麼一個文字的空間就能被計算出來了,接下來就是行的空間,假設你的文字尺寸是20像素的話,這樣我們把文字方塊就訂為20像素,接著我們設定line-height為60px,這時你的行空間就是60px,並且你的文字會放置在這一個行空間的垂直中間位置,利用這樣的特性也就能做到單行的垂直置中效果,這也就表示一行文字的高度佔據了60px的空間,兩行文字的話就是120像素了,有了這樣的概念後,我們就可以來看以下幾個單位設定的差異了。

單位的特性

不同的單位設定會有不同的狀況(廢話),這邊我們針對四種單位來看設定上面的差異,其中唯一一枝獨秀的就是px這個絕對單位,這種單位設定基本上就差不多等同於height的設定了,但也有些小地方的差別,在這篇中暫時不講那些深澀的原理,就以表面上的呈現來簡單了解一下吧,畢竟是金魚都能懂,各位說是吧XD

像素

使用像素(px)這個單位來設定行高,其實如上面概念中所說的,會將你的行空間設定為固定的像素值,並且讓你的文字垂直居中在此行的中間位置,最大的缺點就是一旦文字變更後,可能會產生字級小於行高的狀況,這時就會發生文字頂端被裁掉的狀況,所以一般來說,除非必要,我們應該要視狀況來使用這樣的單位。

百分比、em、數字

百分比是一個相對單位,使用百分的時候,該文字的行高會參考自身的字級,例如我的文字字級設定為20px,行高設定為300%或3em或3,這樣我的行高換算出來就會是60px,與像素最大的不同在於相對單位所帶來的好處是只要我的字級改變,我的行高也就會跟著等比例改變,可說是非常省事的作法。

常用設定

由於文字相關的CSS屬性多數都會有繼承的問題,所以一般來說都會建議採用「純數字」的設定方式,一來字數最少最偷懶(對!我就懶,怎樣!),也多能避免跟字級相關設定的問題產生,可謂是省時省力又保險啊。


「金魚都能懂的CSS選取器」已集結成書,並於書中添加一些新篇章及細節補充,有興趣的朋友可至天瓏書局選購,感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw
https://ithelp.ithome.com.tw/upload/images/20200917/20112550bxAFk2frMp.jpg
讓我們好好善用CSS選取器吧


金魚都能懂的教學系列

鐵人雙主題挑戰中,歡迎訂閱一波

金魚都能懂的Bootstrap5網頁框架開發

立刻訂閱 CSS可樂的網站/頻道享受精彩文章

Line搜尋「@CSScoke」加入CSS可樂公開帳號,可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學
/images/emoticon/emoticon12.gif


上一篇
Text-decoration - 金魚都能懂的CSS必學屬性
下一篇
Color - 金魚都能懂的CSS必學屬性
系列文
金魚都能懂的CSS必學屬性31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言