Question

css 中 text-indent 与padding 有什么区别？

Answer 1

text-indent不影响元素的最终宽度但是有兼容性问题，padding在主流浏览器IE低版本下影响最终宽度，但在chrome和firefox下不影响宽度，但是可以通过CSS reset解决多浏览器显示不一的问题，使得他们最终都影响宽度。

text-indent和padding的基本区别：

1、padding基于盒模型，适用于inline和block层级的元素

2、text-indent基于行内排版，仅仅适用于block层级的元素，作用于block层级的元素的内部第一行文字

padding会作用于inline框或block框的左侧padding区域，会影响到content-box，而文字子节点会出现在content-box内部，因此所有文字都会左移。

<input type="text">作为一个inline-block层级的标签，它是固定单行显示的（而且还和white-space机制不一样），上面所述区别并不存在。

那么区别在哪里呢：

　　1、text-indent基于行内排版，导致应用了direction: rtl之后，text-indent提供的indent出现在右侧；padding-left则不受direction影响。
　　当然，direction这个属性不常用于<input type="text">
　　2、padding-left基于盒模型，所以box-sizing属性会和padding-left、width属性一同影响到元素的最终宽度；而text-indent则始终不会影响元素的宽度。
　　这很重要，因为webkit和firefox的默认样式表里，会设置input元素的box-sizing: border-box，若你同时设置了width和padding-left，会出现webkit/firefox和IE低版本的很大的宽度区别。
　　因此，用到padding-left时，需要重置webkit和firefox的相应样式：

Answer 2

text-indent 文本缩进 常用用法style="text-indent :2em" 用于首行缩进padding ？举个例吧，table里有张图，图的边缘和table的距离就是padding的第一距离，常用用法 style="padding:8px"

Answer 3

padding 元素的内边距text-indent 文本缩进

Answer 4

一个是对文字的，一个是对所有元素的