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

我將會(huì)從下面幾個(gè)方面來進(jìn)行說明：

1.text-indent應(yīng)用于塊級(jí)元素

2.text-indent應(yīng)用于行內(nèi)元素

3.text-indent應(yīng)用于替換元素

4.text-indent應(yīng)用于inline-block元素

5.繼承

6.總結(jié)

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

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

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

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

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

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

chrome14、firefox7、opera10.6、safari5、ie8、ie9表現(xiàn)如下：

ie6/7表現(xiàn)如下：

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

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

塊級(jí)元素不設(shè)置text-indent，而inline元素設(shè)置（inline前有文字）：text-indent不會(huì)作用于inline元素。

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

這里以應(yīng)用到image與input元素為例進(jìn)行說明，請看demo5。

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

ie6/7中的表現(xiàn)：作用于image，且在input中，當(dāng)為中文與英文時(shí)有不同的表現(xiàn)，從這點(diǎn)真不得不佩服ie6/7。還有更加有趣的，當(dāng)你在全英文的輸入框中改它的值時(shí)，又會(huì)有新的表現(xiàn)。

改變英文輸入框的值后：

ie8、ie9中，沒有作用于image，但卻作用于了input，而且與ie6/7一樣，英文與中文有上述的小bug。

改變英文的輸入框的值后：

直接看demo6吧，結(jié)果說明一切（chrome14、firefox7、opera10.6、safari5、ie8、ie9中的表現(xiàn)）。

text-indent作用于inline元素

ie6/7的表現(xiàn)（作用于inline-block元素，而且前面多了32px）：

text-indent這個(gè)屬性是可以繼承的，引用權(quán)威指南上的一句話“在css2.1之前，text-indent總是繼承計(jì)算值，而不是聲明值。”。請看demo7。

非ie系列瀏覽器繼承的均是計(jì)算值。

ie系列繼承的卻是聲明值。

如果將父元素中的text-indent:2em;改成text-indent:28px，就不會(huì)有這個(gè)問題。

看到這么多的不同點(diǎn)，您是不是感覺到很亂？如果你覺得不亂，那好，你是一牛人。不管你亂不亂，反正我是亂了。

所以，我給自己總結(jié)了一下：

1.text-indent只用于div，p這樣的元素上，像image、input、inline-block、inline元素絕對不用。

2.text-indent的值如果子元素也要用到父元素的值，用px單位，而絕不用em。

最后，還是要說一下，本人水平有限，如有什么不當(dāng)之處還請多指正。

最后附上所有demo下載地址：text-indent