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
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知