深入理解CSS文字間距word-spacing與字元間距letter-spacing的不同（附代碼）
- yulia原創
- 2018-09-08 10:45:315873瀏覽
CSS 把「字（word）」定義為任何非空白符字元組成的字串，並由某種空白字元包圍。 letter-spacing和word-spacing這兩個屬性都用來加入他們對應的元素中的空白。有時候常常會把兩者搞混淆，接下來，就和大家聊聊CSS中間隔的設定。
一、word-spacing 增加或減少字間的空白（即字間隔）
1、檢索或設定物件中的單字之間插入的空格數，允許為負值。
2、預設值為normal,等同於設定為0
3、允許使用負值，會讓字母之間變得更緊湊
4、利用這個屬性，可能會創造字間隔太寬的文檔，所以，使用word-spacing 要謹慎使用
二、letter-spacing 增加或減少字符間的空白（即字符間距）
1、設置物件中的文字之間的間隔.每一個中文文字以及英文字母之間，都被隔開了所設定的距離，此屬性是控製字間距的。其屬性值是中英文都適用
2、預設值為normal,等同於設定為0
#3、用letter-spacing 只對文字起作用對於圖片失效的
4、用letter-spacing對漢字是以一個字進行間隔的， 對於英文是以一個字母進行間隔的
舉例：同樣是一句話，分別給letter-spacing和word-spacing屬性，看看他們有什麼不同
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.a1{letter-spacing: 15px;}
.a2{word-spacing: 15px;}
</style>
</head>
<body>
<p class="a1">have a nice day 今天心情怎么样呢？</p>
<p class="a2">have a nice day 今天心情怎么样呢？</p>
</body>
</html>效果圖：
#總結：CSS中的word-spacing 增加或減少字間的空白（即字間隔） ，letter-spacing 增加或減少字符間的空白（即字符間距）。預設情況下，letter-spacing我們幾乎都用不上，我們直接採用瀏覽器預設樣式就可以了。
以上是深入理解CSS文字間距word-spacing與字元間距letter-spacing的不同（附代碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn