網頁-文字間的字距間距

● CSS letter-spacing 文字間的字距

CSS letter-spacing 屬性的功能可以用來設定文字水平方向間的空白區間，letter-spacing 的屬性值可以為正值或負值，當 letter-spacing 的參數值大於 0 時，文字水平間的距離會加大，當 letter-spacing 的參數值小於 0 時，文字水平間的距離會縮小，甚至有可能發生重疊的現象，至於什麼樣的值才會讓文字產生重疊，則要看使用的字型（font-family）以及文字大小（font-size）的搭配。

CSS letter-spacing 屬性基本語法
letter-spacing: 距離值;
CSS letter-spacing 屬性的距離值是可以使用常見的通用單位如 em、cm、px … 等，且 letter-spacing 的效果可以套用到整個網頁或是其它網頁元素中，例如 DIV 區塊、span 區域、表單的 textarea 文字輸入欄位、HTML 表格欄位 … 等，應用範圍相當廣泛。

CSS letter-spacing 的距離值有三種參數模式，分別為 normal、距離、inherit 這三種，說明如下。
letter-spacing:normal; //預設值，文字間距離為標準值
letter-spacing:長度; //自訂文字間距離
letter-spacing:inherit;//繼承自父層的 letter-spacing 屬性值
第三項 inherit 在部分的瀏覽器並不支援，建議不要使用。

CSS letter-spacing 範例
<div style="letter-spacing:-2px;">這是測試文字間距離的範例</div>
<div style="letter-spacing:0px;">這是測試文字間距離的範例</div>
<div style="letter-spacing:normal;">這是測試文字間距離的範例</div>
<div style="letter-spacing:10px;">這是測試文字間距離的範例</div>

呈現結果如

範例共提供了四種不同的 letter-spacing 效果，從第一個 DIV 區塊內將文字距離設為 -2，可以看到文字有黏在一起甚至是小部分重疊的效果，第二個 DIV 區塊與第三個 DIV 區塊都等於沒有特別效果，因為 letter-spacing 的預設效果就是 0px 或 normal，第四個 DIV 區塊就有很明顯的差異，文字間的距離為 10px，整行文字所占用的水平空間也同樣自動加大了，這就是 letter-spacing 屬性的功能。

● 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 屬性值，可以看到當數字越小的時候，文字水平間的距離越靠近，屬性值為負的時候，文字幾乎黏在一起，甚至有可能會疊在一起，如果將 letter-spacing 的屬性值設為 0，效果其實就等於預設值的「letter-spacing:normal」。