由於設計需要，我們的頁面中經常會有如下效果：
可是我們實現出來的效果確實這樣的：
看起來兩行文本沒有對齊嘛，仔細檢查后原來是【字符的原因，因為是中文標點符號占半個字的位置。不信？選中下漢字標點符號看一下即可。至於為什么會占半個字的位置，個人覺得可能是為了方便排版，標點符號也要占一個漢字的空間（想想小時候寫的作文標點符號是不是都占一格）。標點符號相對於格子左對齊，所以自然一側留下一半空間。具體原因求科普！查明原因即對症下葯，既然中文標點符號占漢字半個位置，那么我們使用CSStext-indent：-.5em;樣式修改即可。修改后的效果如下圖所示：
text-indent：CSS1版本屬性，規定文本塊中首行文本的縮進。允許使用負值。如果使用負值，那么首行會被縮進到左邊。可使用指定長度或百分比和inherit，任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。
em：CSS3相對單位，基准點為父節點字體的大小，如果自身定義了font-size按自身來計算（瀏覽器默認字體是16px），整個頁面內1em不是一個固定的值。
除了上述的使用，那么text-indent還有什么妙用呢？
- 首行縮進兩字符：
text-indent：2em; - 隱藏字符：
text-indent: -999em; - 更多玩法，等你發掘
擴展鏈接：