先說明下，這是在谷歌瀏覽器下字型顯示等問題做個研究，火狐下有點差異，不過火狐占有率低，而且顯示的沒有谷歌那麼合理，字型排版上不是強迫症，差別也不大。
div
文字，咋,排-hello spacing
漢字佔的地方是綠色部分是寬14px，高14px
英文本元佔的地方黃色部分是寬 7px，高14px
1.font-size:14px,預設行高會上下加1px,達到16px
2.漢字字高14px,字寬14px（宋體設計的是13+1模式）,字字緊相鄰
3.英文本元（空格看成乙個英文本元，hello後面那個）,寬7px
開始變動css，加字距
4.letter-spacing的意思是字與字之間的間距， 也就是出現在上圖中的藍色方塊，這裡設定寬10px
5.可以理解為預設letter-spacing:0px
6.應該把空格當成乙個英文本元看，他也有自己的letter-spacing
7.中文標點符號等同於漢字，英文狀態下標點符號等同於英文本元
再變動css，加詞距
8.word-spacing，單詞間距，瀏覽器是根據空格判斷的，有空格就認為有詞。
9.hello後的空格，後加上字距letter-spacing(藍色)，再加上 單詞間距（粉紅色塊20） 才是真正的距離。
最後變一次css，加上首行縮排
10.這裡1em為14px,2em為28px,text-indent首行縮排， 所以，文的前面為28px
11.這裡可以看出，字距加在字後面，單詞間的詞距加在字距後， 字距詞距預設皆為0！
最後附上html檔案**
文字，咋,排-hello spacing
css樣式控制首行縮排
段落前面空兩個字的距離，不要再使用空格了，用css實現段落首縮排兩個字元。應該使用首行縮排text indent。text indent可以使得容器內首行縮排一定單位。比如中文段落一般每段前空兩個漢字。在這裡我們需要了解一種長度單位em。em是相對長度單位。相對於當前物件內文字的字型尺寸。我們中文段...
CSS設定字間距 行間距 首行縮排
css設定字間距 行間距 首行縮排 段間距 margin設定 對齊方式 text align justify 兩端對齊 center 中 left 左 right 右 文字垂直排列 writing mode writing mode horizontal tb 預設 水平方向，從上到下 writin...
css文字屬性 首行縮排
css文字屬性 text align center right justify 兩邊對齊 對齊 text decoration line through underline overline 下劃線 text transform uppercase lowercase capitalize 文字轉換...