在我们从小的书写习惯中，都要将一个自然段的首行空两格，这样看起来更加的舒服美观。

所以，css text-indent文本缩进属性是页面中一个比较重要的属性，它可以实现这样的功能。

语法

text-indent: value;

属性值

其中value的值可以为：

  • length: 它可以使用的单位有cm、pt、em、px 等设置缩进。它的默认值为 0。它允许负值。第一行为负数时缩进在左边。
  • %: 以百分比的形式缩进。
  • inherit ： 继承父元素。

比较常用的是text-indent:2em; 缩进2个字。

例子

 <!DOCTYPE html>
<html>
<title>css text-indent 缩进属性例子</title>
<head>
<style>
.div1 {
	border:1px solid orange;
	width:500px;
	text-indent: 50px; 
	font-size:12px;
}
.div2 {
	margin-top:10px;
	border:1px solid orange;
	width:500px;
	text-indent: 2em; 
	font-size:12px;
}
.div3 {
	margin-top:10px;
	border:1px solid orange;
	width:500px;
	text-indent: 10%; 
	font-size:12px;
}
</style>
</head>
<body>
<h3>yxjc123.com css text-indent 缩进属性</h3>
<div class="div1">您好，欢迎来到 yxjc123.com。该网站的开发是为了让您可以轻松学习计算机科学相关技术。 yxjc123.com 始终提供有关各种技术的简单而深入的教程。这个世界上没有人是完美的，也没有什么是永远最好的。但我们可以努力做得更好。</div>
<div class="div2">您好，欢迎来到 yxjc123.com。该网站的开发是为了让您可以轻松学习计算机科学相关技术。 yxjc123.com 始终提供有关各种技术的简单而深入的教程。这个世界上没有人是完美的，也没有什么是永远最好的。但我们可以努力做得更好。</div>
<div class="div3">您好，欢迎来到 yxjc123.com。该网站的开发是为了让您可以轻松学习计算机科学相关技术。 yxjc123.com 始终提供有关各种技术的简单而深入的教程。这个世界上没有人是完美的，也没有什么是永远最好的。但我们可以努力做得更好。</div>
</body>
</html>
效果如下：

css text-indent 文本缩进属性