css ===== text-indent 文本缩进

最新推荐文章于 2023-10-12 14:20:08 发布

笑望灬星辰

最新推荐文章于 2023-10-12 14:20:08 发布

阅读量300

点赞数

本文链接：https://blog.csdn.net/hu1628299958/article/details/110356902

版权

css 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>text-indent</title>
</head>
<style>
    /*
        text-indent
        文本缩进， 可继承 
        取值可正可负  与 x轴正负方向一致 
    */
    body{
        padding:50px
    }
    .b{
        border: 1px solid #dcdcdc;
        margin-top: 30px;

    }
    .div1{
        /* 缩进2个字符  最常用 */
        text-indent: 2em;
    }
    .div2{
        text-indent: 50px;
    }
    .div3{
        text-indent: 5%;
    }
    .div4{
        text-indent: -2em;
    }
</style>
<body>

    <!-- 继承 -->
    <div class="div1 b">
        <p>这个属性最常见的用途是将段落的首行缩进这个属性最常见的用途是将段落的首行缩进</p>
    </div>

    <!-- 缩进固定距离 -->
    <div class="div2 b">这个属性最常见的用途是将段落的首行缩进这个属性最常见的用途是将段落的首行缩进</div>

    <!-- 缩进百分比-->
    <div class="div3 b">这个属性最常见的用途是将段落的首行缩进这个属性最常见的用途是将段落的首行缩进</div>

    <!-- 负值 -->
    <div class="div4 b">这个属性最常见的用途是将段落的首行缩进这个属性最常见的用途是将段落的首行缩进</div>

</body>
</html>

效果
在这里插入图片描述

上下边距是 p 标签默认自带的 16px

在这里插入图片描述

笑望灬星辰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css ===== text-indent 文本缩进

直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>text-indent</title></head><style> /*
复制链接

扫一扫