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中文網其他相關文章!