最近在看文本相關的屬性，覺得text-indent挺有意思的，就小小的總結了一下（這里不討論用text-indent來隱藏文字）。

我將會從下面幾個方面來進行說明：

1.text-indent應用于塊級元素

2.text-indent應用于行內元素

3.text-indent應用于替換元素

4.text-indent應用于inline-block元素

5.繼承

6.總結

text-indent常用于段落首行2字符的縮進。我們先來看一下demo1（所有demo文章最后會提供下載地址）。

各瀏覽器都可以正常的顯示。如圖：

我們也可以通過負的text-indent來制作一些效果，各瀏覽器表現相同（demo2）：

這里分兩部分來說，一是text-indent應用于塊級元素，塊級元素里面有inline元素（通過繼承或者指定text-indent），直接上demo3。

可見行內元素，雖然繼承了text-indent的值（或者指定），卻沒有任何作用。

二是inline元素直接指定text-indent的值，或者塊級元素不指定text-indent，而里面的inline元素指定。請看demo4。

chrome14、firefox7、opera10.6、safari5、ie8、ie9表現如下：

ie6/7表現如下：

比較一下，chrome14、firefox7、opera10.6、safari5、ie8沒有作用于inline元素，但ie6/7卻作用于inline元素，而且用于inline元素上，不同的條件表現也不同。

直接用于inline元素上：前面有32px的空白

塊級元素不設置text-indent，而inline元素設置（inline前有文字）：text-indent不會作用于inline元素。

塊級元素不設置text-indent，而inline元素設置（inline前木有文字）：text-indent會作用于inline元素，且與demo中設置的相同2em(24px，文字大小為12px)。

這里以應用到image與input元素為例進行說明，請看demo5。

chrome14、firefox7、opera10.6、safari5中的表現：沒有作用于image，但卻作用于了input，且中英文沒有區別。