汇总关于css中text-indent应用总结

css中text-indent应用总结
　　css中的text-indent以前从来没有用过这个属性，今天在修改网站的时候发现了这个挺有用的属性就来做个总结。希望对大家能够用一定的帮助。
　　我将会从下面几个方面来进行说明：
　　1.text-indent应用于块级元素
　　2.text-indent应用于行内元素
　　3.text-indent应用于替换元素
　　4.text-indent应用于inline-block元素
　　5.继承
　　6.总结
　　一、text-indent应用于块级元素
　　text-indent常用于段落首行2字符的缩进。我们先来看一下demo1（所有demo文章最后会提供下载地址）。
　　各浏览器都可以正常的显示。如图：
　　css中text-indent应用总结
　　我们也可以通过负的text-indent来制作一些效果，各浏览器表现相同（demo2）：
　　css中text-indent应用总结
　　二、text-indent应用于行内元素
　　这里分两部分来说，一是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)。
　　三、text-indent应用于替换元素
　　这里以应用到image与input元素为例进行说明，请看demo5。
　　chrome14、firefox7、opera10.6、safari5中的表现：没有作用于image，但却作用于了input，且中英文没有区别。