letter-spacing 字間距

當(dāng)我們需要擴(kuò)大或者減少字符之間的距離時(shí)候，會(huì)用到這個(gè)屬性。如果我們需要調(diào)整字符間的距離可以用到這個(gè)屬性。

1. 官方定義

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

2. 慕課解釋

該屬性定義了在文本字符框之間插入多少空間。由于字符字形通常比其他字符框要窄，指定長(zhǎng)度值時(shí)，會(huì)調(diào)整字母之間通常的間隔。因此，normal 就相當(dāng)于值為 0。

這個(gè)屬性常用來修改文字之間的距離，它允許為負(fù)值，默認(rèn)的字符間的距離為 0。如果數(shù)值小于 0 字符會(huì)緊湊，大于 0 時(shí)越大越松散。

3. 語法

.demo{		
    letter-spacing: value;
}

值說明

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

4. 兼容性

5. 實(shí)例

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

.demo{
    letter-spacing:5px;
}

效果圖

2. 設(shè)置字符之間距離為 -2px。

.demo{
    letter-spacing:-2px;
}

效果圖

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

<div class="demo">
    <span>慕課網(wǎng)</span>
    <span>學(xué)習(xí)</span>
</div>

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

效果圖

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

6. 經(jīng)驗(yàn)分享

與 word-spacing 的區(qū)別：

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

7. 小結(jié)

1. 這個(gè)屬性僅僅對(duì)字符起作用，不能作用于元素標(biāo)簽上面。

2. 這個(gè)屬性不可以是 % 這樣的計(jì)量單位，因?yàn)樗皇且粋€(gè)距離，沒有相對(duì)點(diǎn)，瀏覽器不知道該如何解釋。