Web速查-索引

text-indent

定义

text-indent 属性规定文本块中首行文本的缩进。

注意：负值是允许的。如果值是负数，将第一行左缩进。

语法

text-indent：length|%|inherit;

属性值

值 描述
length 定义固定的缩进。默认值：0。
% 定义基于父元素宽度的百分比的缩进。
inherit 规定应该从父元素继承 text-indent 属性的值。

实例

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>NTHOME-零基础入门学习Web（HTML5+CSS3）</title>

    <style>

        .p1 {text-indent:33px;}

        .p2 {text-indent:-33px;}

    </style>

</head>

<body>

   <p>正常：Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur eius et fuga impedit, labore laborum magni modi necessitatibus nobis nulla omnis quasi reiciendis repudiandae rerum saepe sapiente similique tempore, veniam.</p>

   <p class="p1">text-indent:33px：Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque eius illum libero perferendis repudiandae sint tempore voluptates voluptatibus. Atque debitis nemo odio rem sed? Ad assumenda beatae culpa odio velit.</p>

   <p class="p2">text-indent:-33px：Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores eius esse maiores non odit pariatur provident quia sapiente. Aliquid animi at eaque earum quae temporibus, totam voluptatibus? Et, quasi, repellat?</p>

</body>

</html>

正常：Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur eius et fuga impedit, labore laborum magni modi necessitatibus nobis nulla omnis quasi reiciendis repudiandae rerum saepe sapiente similique tempore, veniam.

text-indent:33px：Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque eius illum libero perferendis repudiandae sint tempore voluptates voluptatibus. Atque debitis nemo odio rem sed? Ad assumenda beatae culpa odio velit.

text-indent:-33px：Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores eius esse maiores non odit pariatur provident quia sapiente. Aliquid animi at eaque earum quae temporibus, totam voluptatibus? Et, quasi, repellat?

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

Safari Chrome FireFox IE
1.0 1.0 1.0 3.0