text-indent的用法包括块级元素等详细总结

下面是关于text-indent的用法的详细攻略。

1. text-indent 简介

text-indent 是 CSS 的一个文本缩进属性，作用是控制文本的缩进量。具体来说，它只影响文本的首行，后续行不受影响。

text-indent 可以应用于块级元素（如 <p>，<div> 等）和列表项（如 <li>）。如果应用于行内元素（如 <span>，<a> 等），则不起任何作用。

2. text-indent 的使用方法

text-indent 属性有两种使用方式：绝对值和相对值。

2.1 绝对值

使用绝对值可以指定文本的精确缩进量。例如，下面的样式将使 p 元素的首行缩进 2 个 em 的大小：

p {
    text-indent: 2em;
}

2.2 相对值

使用相对值可以将缩进量设置为相对于父元素的大小的百分比。例如，下面的样式将使 p 元素的首行缩进等于其父元素宽度的 10%：

div {
    width: 400px;
}

p {
    text-indent: 10%;
}

在以上示例中，当父元素的宽度为 400px 时，p 元素的首行将缩进 40px。

3. 适用于列表项的 text-indent

与普通块级元素不同，列表项（如 <li>）有自己的 text-indent 属性。该属性只适用于它所属的列表。例如，下面的样式将使 ul 列表中的所有列表项第一行都缩进 2 个 em 的大小：

ul {
    text-indent: 2em;
}

如果您想在一个有序列表（如 <ol>）中给每个列表项的文本添加缩进，可以这样做：

li {
    text-indent: -1em;
    margin-left: 1em;
}

在以上示例中，首先通过 text-indent 将所有列表项的文本向左移动 1 个 em 的大小（即与当前的左侧数字重叠），然后通过 margin-left 将文字移到正确的位置。

结论

正如您所看到的，text-indent 是一个非常有用的 CSS 属性，它可以轻松地控制文本的缩进量。它可以应用于块级元素和列表项，并使用绝对值和相对值来指定缩进量。