letter-spacing 字間距

當我們需要擴大或者減少字符之間的距離時候，會用到這個屬性。如果我們需要調整字符間的距離可以用到這個屬性。

1. 官方定義

letter-spacing 屬性增加或減少字符間的空白（字符間距）。

2. 解釋

該屬性定義了在文本字符框之間插入多少空間。由于字符字形通常比其他字符框要窄，指定長度值時，會調整字母之間通常的間隔。因此，normal 就相當于值為 0。

這個屬性常用來修改文字之間的距離，它允許為負值，默認的字符間的距離為 0。如果數值小于 0 字符會緊湊，大于 0 時越大越松散。

3. 語法

.demo{		
    letter-spacing: value;
}

值說明

通過上面圖片，我們可以看到從左到右每個字符的右側都增加了 10px。

4. 兼容性

5. 實例

1. 字符之間增加 5px 的間距。

.demo{
    letter-spacing:px;
}

效果圖

2. 設置字符之間距離為 -2px。

.demo{
    letter-spacing:-px;
}

效果圖

3. 通過使用 letter-spacing 清除我們編輯 html 代碼時候元素設定 inline-block 之后出現的空格。

<div class="demo">
    <span>網</span>
    <span>學習</span>
</div>

.demo{
    letter-spacing:-px;
}
.demo>span{
    display: inline-block;
    width: px;
    background: red;
    letter-spacing:normal
}

效果圖

上圖是 span 只設定了 display: inline-block;，下圖我們通過 在父級元素上設置letter-spacing去除了span 之間空格的距離。而在span中又重置了letter-spacing讓文字恢復了它們之間的距離，讓其不在擁擠。不過我們不推薦這種方式，建議內聯塊級元素不要分行。

6. 經驗分享

與 word-spacing 的區別：

word-spacing 這個屬性只能作用英文，意思是兩個英文單詞之間的距離，這里要注意是‘英文單詞’而不是‘字符’，而 letter-spacing 沒有任何限制可以作用于‘任何字符’。

7. 小結

1. 這個屬性僅僅對字符起作用，不能作用于元素標簽上面。

2. 這個屬性不可以是 % 這樣的計量單位，因為它不是一個距離，沒有相對點，瀏覽器不知道該如何解釋。