• :一大波赠书活动正式来袭!满足条件的小伙伴每人赠送一本书,只限前100名!小伙伴们赶紧到碗里来!查看详情

4.5 首行缩进text-indent

一、text-indent属性简介

在CSS中,使用text-indent属性定义段落的首行缩进。我们都知道段落p标签的首行是不会缩进的,我们在学习HTML入门教程时,都是使用4个“ ”(牛逼SP)来缩进首行文本,让段落排版规范一些。但是这样的话,冗余代码就会很多。

现在,我们可以使用CSS的text-indent属性来控制文本首行的缩进。

语法:

text-indent:像素值;

说明:

CSS入门教程中,全部都是使用像素作单位,在CSS进阶阶段我们会深入讲解其他CSS单位。

举例:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>text-indent属性</title>
    <style type="text/css">
        p
        {
            font-size:14px;
            text-indent:28px;
        }
    </style>
</head>
<body>
    <h3>爱莲说</h3>
    <p>水陆草木之花,可爱者甚蕃。晋陶渊明独爱菊。自李唐来,世人甚爱牡丹。予独爱莲之出淤泥而不染,濯清涟而不妖,中通外直,不蔓不枝,香远益清,亭亭净植,可远观而不可亵玩焉。</p>
    <p>予谓菊,花之隐逸者也;牡丹,花之富贵者也;莲,花之君子者也。噫!菊之爱,陶后鲜有闻;莲之爱,同予者何人? 牡丹之爱,宜乎众矣。</p>
</body>
</html>

在浏览器预览效果如下:

text-indent属性

分析:

我们都知道,段落首行缩进的是两个字的间距,如果要实现这个效果,text-indent的属性值应该是字体font-size属性值的两倍,大家琢磨一下(参考本例)就知道了。这是一个小技巧,大家以后应该会经常用得到。

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

如果你想要获取更多学习资料,或者在学习过程中遇到疑问想要得到跟教程一样最优质的解答,请通过以下方式关注我们:

(1)官方微博:

(2)新手Q群:69660533(暗号:lvye)(建议初学前端的加)

(3)官方Q群:457631216(暗号:lvye)(建议有JS基础的加)

(4)绿叶论坛:进入论坛

(5)常见问题:绿叶学习网常见问题解答

回到顶部