text-indent

text-indent 属性能定义一个块元素首行文本内容之前的缩进量。

尝试一下

Syntax

/* <length> 长度值 */
text-indent: 3mm;
text-indent: 40px;

/* <percentage>百分比值取决于其包含块（containing block）的宽度*/
text-indent: 15%;

/* 关键字 */
text-indent: 5em each-line;
text-indent: 5em hanging;
text-indent: 5em hanging each-line;

/* 全局值 */
text-indent: inherit;
text-indent: initial;
text-indent: unset;

Values

<length>: 使用固定的<length>值来指定文本的缩进。允许使用负值。查阅可能的 <length> 单位。
<percentage>: 使用包含块宽度的百分比作为缩进。
each-line 实验性: 文本缩进会影响第一行，以及使用<br>强制断行后的第一行。
hanging 实验性: 该值会对所有的行进行反转缩进：除了第一行之外的所有的行都会被缩进，看起来就像第一行设置了一个负的缩进值。

正式语法

text-indent = 
  [ <length-percentage> ]  &&
  hanging?                 &&
  each-line?               

<length-percentage> = 
  <length>      |
  <percentage>

例子

HTML

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

CSS

p {
  text-indent: 5em;
  background: powderblue;
}

结果

规范

Specification
Unknown specification # text-indent-property

初始值	`0`
适用元素	block containers
是否是继承属性	yes
Percentages	refer to the width of the containing block
计算值	the percentage as specified or the absolute length, plus any keywords as specified
Animation type	a length, percentage or calc();

浏览器兼容性

BCD tables only load in the browser