CSS letter-spacing 文字水平間距設計

CSS letter-spacing 文字水平間距設計的功能，可以用來調整網頁文字水平方向彼此間的距離，可以加大距離，當然也可以縮小距離，只需要透過 CSS letter-spacing 的參數值來設定就可以了，使用方式非常簡單，也是網頁文字排板的好幫手，letter-spacing 算是相當基本的 CSS 設計技巧，幾乎所有的新版主流瀏覽器都支援 CSS letter-spacing 屬性的效果。

CSS letter-spacing 語法規則

letter-spacing: 屬性值;

CSS letter-spacing 的屬性值很特別，可以是正整數，也可以是負整數，正整數代表文字水平間的距離要加大，負整數代表文字水平間的距離要縮小，預設值是 normal，跟沒寫一樣，所以既然要用 letter-spacing 這個屬性，就挑個屬性值給它吧！

CSS letter-spacing 實際範例

<div style="letter-spacing:-1;">將 letter-spacing 設為 -1</div>
<div style="letter-spacing:0;">將 letter-spacing 設為 0</div>
<div style="letter-spacing:5;">將 letter-spacing 設為 5</div>

範例輸出效果

將 letter-spacing 設為 -1

將 letter-spacing 設為 0

將 letter-spacing 設為 5

從範例中的三個不同 letter-spacing 屬性值，可以看到當數字越小的時候，文字水平間的距離越靠近，屬性值為負的時候，文字幾乎黏在一起，甚至有可能會疊在一起，如果將 letter-spacing 的屬性值設為 0，效果其實就等於預設值的「letter-spacing:normal」。

更多網頁文字調整技巧