css首行缩进的设置方法：首先新建一个html代码文件；然后给设置一个class类；接着在设置cont类的宽为400px；最后设置p标签的首行缩进为两个字符即可。
本教程操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。
新建一个html代码文件，然后在这个html代码页面上创建一个
，同时给这个
设置一个class类；然后在这个
中创建几个
,并个
添加上内容。如图：
代码：
<div class="cont">
<p>顶顶顶顶顶顶顶顶顶顶顶顶顶顶多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<p>的顶顶顶顶顶的顶顶顶顶顶</p>
<p>顶顶顶顶顶顶顶顶顶顶顶顶顶顶多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多</p>
</div>
登录后复制
设置样式。在
标签后面新建一个<style>,在这个<style>设置cont类的宽为400px，然后设置p标签的首行缩进为两个字符。如图：<p>推荐：《<a href="https://www.php.cn/course/list/12.html" target="_blank">css视频教程》<p>代码：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><style>
.cont{
width:400px;
}
.cont p{
text-indent: 2em;
}
</style></pre><div class="contentsignin">登录后复制</div></div><p><img src="https://img.php.cn/upload/image/623/356/755/1614479678378976.png" title="1614479678378976.png" alt="02311be1aedc58c01e8cc6b65dca589.png"/><p>使用浏览器打开，即可看到首行缩进的效果。如图：<p><img src="https://img.php.cn/upload/image/242/185/179/1614479684867032.png" title="1614479684867032.png" alt="0106aef5e124875e1c67656762e94a5.png"/><p>所有代码。直接复制所有代码，粘贴到新建html文件上，保存后使用浏览器打开即可看到所有效果。<p>代码：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首行缩进
<style>
.cont{
width:400px;
}
.cont p{
text-indent: 2em;
}
</style>
<div class="cont">
<p>顶顶顶顶顶顶顶顶顶顶顶顶顶顶多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<p>的顶顶顶顶顶的顶顶顶顶顶</p>
<p>顶顶顶顶顶顶顶顶顶顶顶顶顶顶多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多</p>
</div>
