CSS使用letter-spacing屬性定義字間距,使用word-spacing屬性定義詞間距。這兩個屬性取值單位都是像素。
語法:
letter-spacing:像素值;
說明:
在CSS入門教程中,我們都是采用像素做單位。
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>letter-spacing屬性</title> <style type="text/css"> #p1{letter-spacing:0px;} #p2{letter-spacing:3px;} #p3{letter-spacing:5px;} </style> </head> <body> <p id="p1">Rome was't built in a day.羅馬不是一天建成的。</p><hr/> <p id="p2">Rome was't built in a day.羅馬不是一天建成的。</p><hr/> <p id="p3">Rome was't built in a day.羅馬不是一天建成的。</p> </body> </html>
在浏覽器預覽效果如下:
分析:
letter-spacing控制的是字間距,每一個中文文字作為一個“字”,而每一個英文字母也作為一個“字”!大家要細心留意一下。
默認情況下,letter-spacing我們幾乎都用不上,我們直接采用浏覽器默認樣式就可以了。大家完全可以忽略掉這個屬性。
語法:
word-spacing:像素值;
說明:
在CSS初學者階段,我們都是采用像素做單位。
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>word-spacing屬性</title> <style type="text/css"> #p1{word-spacing:0px;} #p2{word-spacing:3px;} #p3{word-spacing:5px;} </style> </head> <body> <p id="p1">Rome was't built in a day.羅馬不是一天建成的。</p><hr/> <p id="p2">Rome was't built in a day.羅馬不是一天建成的。</p><hr/> <p id="p3">Rome was't built in a day.羅馬不是一天建成的。</p> </body> </html>
在浏覽器預覽效果如下:
分析:
定義詞間距,以空格為基准進行調節,如果多個單詞被連在一起,則被word-spacing視為一個單詞;如果漢字被空格分隔,則分隔的多個漢字就被視為不同的單詞,word-spacing屬性此時有效。