csstext-indent的全面解析

一、csstext-indent的定义

css text-indent属性用于控制文本块中第一行的缩进。应用于一个块级元素，只有文本内容会受到影响。该属性不会影响行内元素的文本。

代码示例：

p {
    text-indent: 2em;
}

二、csstext-indent的使用场景

1、在段落中实现首行缩进效果。

2、在嵌套列表中实现层级缩进效果。

代码示例：

/* 段落首行缩进 */
p {
    text-indent: 2em;
}
/* 嵌套列表层级缩进 */
ul {
    text-indent: 2em;
}
ul ul {
    text-indent: 4em;
}
ul ul ul {
    text-indent: 6em;
}

三、csstext-indent的特殊效果

1、应用于表格中，实现首列缩进效果。

2、应用于强制换行（
）元素中，实现缩进效果。

3、应用于链接中，实现链接的"挂钩"效果。

代码示例：

/* 表格首列缩进 */
table td:first-child {
    text-indent: 2em;
}
/* 
标签缩进 */
br {
    display: block;
    content: "";
    margin-left: 2em;
}
/* 链接挂钩效果 */
a {
    text-indent: -2em;
    padding-left: 2em;
}

四、csstext-indent的注意事项

1、负值text-indent会导致第一行文本超出父级元素边界，需要用padding补偿。

2、text-indent的另一个作用是取消列表的默认缩进效果。

代码示例：

/* 取消默认列表缩进 */
ul, ol {
    padding: 0;
    margin: 0;
    text-indent: 0;
}

五、csstext-indent的兼容性

text-indent在所有主流浏览器中都有很好的支持。但在使用负值text-indent时，IE7及以下版本不会将padding也加以缩进。因此需要为这些版本添加特定样式。

代码示例：

/* IE7及以下版本处理 */
* html ul li, * html ol li {
    margin-left: 20px;
    text-indent: -20px;
}