CSS letter-spacing 屬性設計文字水平間距離 - CSS 學習筆記

CSS letter-spacing 屬性的功能是用來設計網頁文字水平間距離，若以數字 0 為基準，當 letter-spacing 屬性的參數設定為小於 0，文字水平間距離將會縮小，相反的，如果把 letter-spacing 屬性的參數值設定為大於 0，則文字水平間距離會加大，一般來說，標準的網頁文字水平距離會以 0 或 normal 為基準表示，網頁設計師再根據當時的需求調整文字水平距離，創造不同的文字排版效果，請看以下的屬性語法以及實際應用範例。

CSS letter-spacing 屬性語法

letter-spacing: 文字水平距離;

CSS 的 letter-spacing 屬性只有一個參數＂文字水平距離＂可以使用，經常採用的三種設定方式為 normal、自訂距離以及 inherit，其中又以＂自訂距離＂最為常用，CSS letter-spacing 屬性可接受多種不同的距離單位，例如 px, em, cm，通常網頁設計師會用自己習慣的單位來設定水平距離，不過建議還是以 px 為主要使用單位，以下這張表是三種 letter-spacing 的參數設定與樣式說明，提供給各位讀者朋友們參考。

CSS letter-spacing 屬性常用參數設定

參數	樣式說明
letter-spacing:normal;	預設水平距離，沒有特殊設定。
letter-spacing:自訂距離;	自訂水平距離，用數字加單位，例如 25px。
letter-spacing:inherit;	繼承自父層的文字水平距離，部份瀏覽器不支援。

CSS letter-spacing 屬性範例

範例的實際效果

測試文字

範例中共有三個不同的 DIV 區塊，每個 DIV 區塊內各有一個 letter-spacing 屬性，第一個 letter-spacing 參數設定為 10px，意思就是從原本的文字水平距離再增加 10px 單位的距離，第二個 letter-spacing 屬性則是標準文字水平距離，看起來就跟平常一樣，第三個 letter-spacing 屬性使用負的參數值，讓文字有重疊的效果，以上就是常見 CSS letter-spacing 屬性應用方式。

調整完文字的水平間距離，也可以調整文字的垂直行高：CSS line-height 網頁文字行高設計。

更多網頁文字美化設計