CSS text-indent 属性技术文档

介绍

CSS中的text-indent属性是用来设置文本缩进的，即在文本第一行开头处空出指定长度的空白。该属性适用于块级元素或块级容器中的第一行文本。

语法

text-indent: length | percentage | initial | inherit;

• length：指定一个正数值来设置文本缩进的长度。例如text-indent: 20px;
• percentage：指定一个百分数值来设置文本缩进的长度，基于元素宽度计算。例如 text-indent: 50%;
• initial: 将属性设置为默认值；
• inherit: 继承父元素的属性。

浏览器支持

text-indent 属性在所有的主流浏览器中得到支持，包括IE6及以上、Chrome、Safari、Firefox、Opera等。

实例

以下代码将会在一个段落的开头空出40px的缩进：

p {
  text-indent: 40px;
}

以下代码将会在一个div的开头空出20%的缩进：

div {
  text-indent: 20%;
}

注意事项

• text-indent属性仅适用于块级元素或块级容器中的第一行文本。如果元素或容器只包含一行文本，则该属性不会产生效果。
• text-indent属性的值可以是负值，这将导致第一行向左缩进而非向右缩进。
• 在一些情况下，文本缩进可能会被其他CSS属性覆盖，例如text-align，因此需要注意优先级。

结论

text-indent属性是CSS中控制文本缩进的属性，适用于块级元素或块级容器中的第一行文本。通过设置文本缩进，可以使文本排版更加美观、规范。在使用时，需要注意text-indent属性的取值范围、百分比的计算方式、优先级等，以避免出现不必要的问题。