李涛自留地
回到顶部
首页 > 前端 > text-indent在Css中有什么作用？text-indent怎么使用？

text-indent在Css中有什么作用？text-indent怎么使用？

文章目录

text-indent在我们前端开发网页Css美化的时候，也是一个必不可少的元素属性之一。本文将从text-indent是什么意思？text-indent在Css中有什么作用？text-indent的属性有哪些？text-indent怎么用？以及text-indent使用实例代码。

一、text-indent是什么意思？

text-indent翻译成中文就是文本缩进的意思，从英文翻译过来之后，我们就应该知道它在Css中如果设置了text-indent会起到什么作用了。

二、text-indent在Css中的作用

上面提到了text-indent翻译后的意思是文本缩进，那么text-indent在Css中确实是起到文本缩进的作用，不过text-indent只能起到首行文本缩进的作用。

三、text-indent属性

text-indent主要属性值就是控制文本缩进的长度，一般是长度单位。

text-indent属性值长度单位可以使用em、rem、px、%、pt、vh、vw等单位来设置文本缩进的长度，一般情况下设置text-indent的值都是正值。当然也可以设置text-indent的长度值为负值，当text-indent的值为负值的时候，会超出原有块级元素存在溢出的显现，所以正常使用text-indent属性值是不存在负值情况的。

text-indent在Css中有什么作用？text-indent怎么使用？

四、哪些标签常用text-indent属性

一般比较常见的会使用text-indent属性的标签是<p>段落标签，因为我们常见的文章格式中，每一段的文字段落开始的第一行行首都会留出两个汉字的字节，这样段落与段落看上去更加的美观，最主要的是这是文章段落的标准格式。

当然，在我们需要对一些特殊的文字显示的时候不想让文字顶着块级元素的最左侧的时候，我们又不想使用外边距或者是内边距来控制这些文字的时候，我们也可以使用text-indent属性来达到这样的效果。

五、text-indent使用实例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>text-indent在Css中有什么作用？text-indent怎么使用？</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 16px;
            background-color: #f6f6f6;
        }

        .container {
            width: 1024px;
            margin: 0 auto;
            border: 1px solid red;
        }

        .box {
            width: 600px;
            height: 200px;
            margin-top: 50px;
        }

        .box .items {
            width: 100%;
            height: 100px;
            margin: 0 auto;
            padding: 15px;
            float: left;
            background-color: #fff;
        }

        .box .items p {
            text-indent: 2rem;
        }
    </style>
</head>

<body class="container">
    <section class="box">
        <div class="items">
            <p>李涛自留地《text-indent在Css中有什么作用？text-indent怎么使用？》段落首行文字缩进2个汉字测试段落首行文字缩进2个汉字</p>
        </div>
    </section>

</body>

</html>
text-indent在Css中有什么作用？text-indent怎么使用？

以上实例代码中最终显示的效果就是text-indent设置段落首行文字向右缩进2个汉字，将段落

标签的Css属性中设置为：text-indent:2rem;就可以实现，如果想要用px像素就要看一下自己Css中设置的文字大小是多少像素，只要达到2倍的字体像素就可以就可以达到段落首行文字向右缩进2个汉字的效果，比如：在上面实例代码中我在body中设置的font-size是16px，那么text-indent设置为32px就可以了。

以上就是本文的全部内容，李涛自留地从text-indent是什么意思？text-indent在Css中的作用、text-indent属性、哪些标签常用text-indent属性以及通过一个text-indent使用实例代码，详细又明了的记载了text-indent的用法，以及如何使用text-indent实现设置段落首行文字向右缩进2个汉字，希望本文能给浏览本文的读者带来帮助！

若非作者标注皆为李涛自留地原创文章，转载或复制请以超链接形式并注明出处。