How does CSS set up first line indentation?

May 29, 2021 Article blog

When developing a Web page, parts that involve one or more paragraphs of text often set it to the first line of indentation 2 characters to optimize the page and enhance the user experience. So this article W3Cschool small editor teaches you how CSS sets up the first line of indentation.

text-indent: Sets the indentation of the first line of text in a block of text (block-level elements). T he first line indentation is set by the property values of length and % T here is another way to indent, which is em e m is a unit of relative length, which is the font size within the current object. I f the first line indents two characters, that is, 2em. Let's look at the next three ways to achieve this:

How does CSS set up first line indentation?1

Related code:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>首行缩进 - 编程狮(w3cschool.cn)</title>
	<style>
		.demo{
				width: 400px;
				height: 200px;
		}
		.one{
				text-indent:36px;
		}
		.two{
				text-indent:10%;
		}
		.three{
				text-indent:2em;
		}
		</style>
</head>
<body>
	<div class="demo">
		<p>以盒子宽400px，高200px为例：</p>
		<p class="one">这是一段text-indent：36px的测试代码，让我们来看一下缩进效果如何。</p>
		<p class="two">这是一段text-indent：10%的测试代码，让我们来看一下缩进效果如何。</p>
		<p class="three">这是一段text-indent：2em的测试代码，让我们来看一下缩进效果如何。</p>
	</div>
</body>
</html>

That's all CSS does to set up the first line of indentation.

How does CSS set up first line indentation?

Cookie Consent