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: 该值会对所有的行进行反转缩进：除了第一行之外的所有的行都会被缩进，看起来就像第一行设置了一个负的缩进值。

正式语法

<length-percentage> && hanging? && each-line? where <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	Status	Comment
CSS Text Module Level 3 text-indent	Candidate Recommendation	Added the `hanging` and `each-line` keywords
CSS Transitions text-indent	Working Draft	Lists `text-indent` as animatable.
CSS Level 2 (Revision 1) text-indent	Recommendation	The behavior with `display: inline-block` and anonymous block boxes have been explicitly defined.
CSS Level 1 text-indent	Recommendation

初始值	`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