text-indent:2em;　

解释一下：text的意思是文本，indent在计算机英语中意思是缩进，至于后面的2em意思就是2个相对单位；　

　　em又是什么单位？　

　　em这个单位的意思就是文字的高度，1em就是1个文字的高度，2em就是两个文字高度，所以我们写的“text-indent:2em;”的意思就是，文本缩进2个文字的高度，因为汉字是方块字，高度和宽度是一样的，所以缩进2个文字的高度，就等于缩进两个文字的宽度，最后的效果就是缩进了两个文字。　

　　【注意】　

　　对于"text-indent:2em;"属性，只能加在块状元素上面，内联元素是不起作用的。

一、text-indent应用于块级元素

在网页中的文本格式中最重要的效果之一就是段落的首行文本缩进，尤其在新闻类页面，使用text-indent，任何元素都可以让首行以给定的长度缩进，

长度甚至可以是负数，这一属性的最常用方式就是段落的首行缩进；

p{text-align:2em;}

这条规则使任何段落的首行缩进2个字符大小。

二、text-indent应用于行内元素没有效果；

三、text-indent应用于替换元素

这里以应用到image与input元素为例进行说明，

img缩进了2个字符，input里面的value值夜缩进了2个字符。

实例

将段落的第一行缩进 50 像素：

p

  {

  text-indent:50px;

  }

CSS                           文本属性

属性                          描述

color                 设置文本颜色

direction                 设置文本方向。

line-height         设置行高。

letter-spacing         设置字符间距。

text-align         对齐元素中的文本。

text-decoration 向文本添加修饰。

text-indent         缩进元素中文本的首行。

text-shadow         设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。

text-transform         控制元素中的字母。

unicode-bidi         设置文本方向。

white-space         设置元素中空白的处理方式。

word-spacing         设置字间距。

六、总结

看到这么多的不同点，您是不是感觉到很乱？如果你觉得不乱，那好，你是一牛人。不管你乱不乱，反正我是乱了。

所以，我给自己总结了一下：

1.text-indent只用于div，p这样的元素上，像image、input、inline-block、inline元素绝对不用。

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

原文链接：https://www.qiquanji.com/post/8675.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。