css如何设置段落缩进-木庄网络博客

本文摘自PHP中文网，作者醉折花枝作酒筹，侵删。

在css中，可以使用“text-indent”属性设置段落缩进，语法“text-indent:数值”；该属性规定文本块中首行文本的缩进，允许使用负值，如果使用负值，那么首行会被缩进到左边。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

text-indent缩进语法与结构

1	`.divcss5{text-indent:25px}`

这里divcss5对象内段落首行开头文字缩进了25像素。

css text-indent文本缩进样式属性单词，text-indent的值跟数字+单位组成缩进样式。

css段落段首文字缩进案例

通常text-indent缩进属性将对段落首行开头文本文字进行缩进显示。如果使用html br换行标签，第二个换行开始也不会出现缩进效果。如果使用了html P段落标签段落换行，将会出现每个p段落换行开头都将缩进，这里我们给大家通过案例演示给大家，希望通过DIVCSS5案例掌握CSS text-indent缩进样式。

CSS代码

.divcss5{
 text-indent:35px
 }

HTML代码片段

<div class="divcss5"> 
    <p>第一段开始缩进效果<br /> 使用br标签的换行将不会缩进 </p> 
    <p>第二段使用p标签段落首行也会缩进<br /> 第二行使用了br不会缩进<br /> 第三行提行使用了br也不会缩进</p>
 </div>

运行结果：

DX1LPI5IARV52UI0Y}VNWFJ.png

推荐学习：css视频教程

以上就是css如何设置段落缩进的详细内容，更多文章请关注木庄网络博客！

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » css如何设置段落缩进

css如何设置段落缩进

text-indent缩进语法与结构

css段落段首文字缩进案例

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

相关推荐

评论