How to indent the first line of a paragraph by two characters in CSS (detailed graphic and text explanation)-CSS Tutorial-php.cn

How to indent the first line of a paragraph by two characters in CSS (detailed graphic and text explanation)

yulia

Release： 2018-10-31 15:50:57

Original

18061 people have browsed it

Have you noticed when browsing the website that the beginning of each paragraph of text is indented by two characters? Friends who are learning HTML and CSS, do you know how to set the indentation of the first line of CSS? This article will tell you about the implementation method of indenting the first line of CSS by two characters. The following is a detailed introduction. Interested friends can refer to it.

The text-indent property in CSS can indent the beginning text of a paragraph. The value can be a positive value or a negative value. If it is a negative value, the first line of text will be indented to the left. Most browsers support the text-indent attribute.

Note: When using the text-indent attribute for text indentation, you need to pay attention to browser compatibility, as shown below:

How to indent the first line of a paragraph by two characters in CSS (detailed graphic and text explanation)

Basic syntax: Selector {text-indent:20px}

means that the first line of text in this selector is indented by 20 pixels.

The attribute value is set as follows:

length can set the fixed length of text indentation. The default value is 0

%The set indentation is based on

inherit indicates that the text-indent attribute value can be inherited from the parent element

Example demonstration: Use the text-indent attribute in CSS to implement the header of text Line indentation effect

Detailed steps: Create two p tags on the page, add a paragraph of text to the p tag, and set the length of the p tag to 300px in order to easily see the effect. , see what their effects are now. The specific code is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{width: 300px;}
</style>
</head>
<body>
<p>好与不好都走了，幸与不幸都过了。真正的梦想，永远在实现之中，更在坚持之中。
累了，就停一停，让手贴着手，温暖冷漠的岁月;苦了，就笑一笑，让心贴着心，体味至爱的抚摸;</p>
<p>哭了，就让泪水尽情流淌，痛彻心菲也是精彩。选择一条道路，就选择一种人生一种无悔。
阴霾终会荡尽，狞笑终是无聊卑鄙终会沉寂。　</p>
</body>
</html>

Copy after login

As you can see in the picture below, the page displays two paragraphs of text, and the first lines of the two paragraphs of text are not indented.

How to indent the first line of a paragraph by two characters in CSS (detailed graphic and text explanation)

Next, add the text-indent attribute to the p tag and set the attribute value to 2em. Em is a relative unit and 2em represents the current text size. twice, that is, two characters, and see what effect it has.

p{width: 300px;text-indent: 2em;}

Copy after login

Rendering:

How to indent the first line of a paragraph by two characters in CSS (detailed graphic and text explanation)

#Comparing the two pictures before and after, we can find that after adding the text-indent attribute in CSS, each paragraph of text The first lines of are indented by two characters.

Summary: The above introduces you to the method of indenting the first line of CSS. It is relatively simple, but you should pay attention when using it: if the label is not a block-level element, use the display:inline-block attribute to make it have Attributes of block-level elements, otherwise the first line indentation is invalid.

The above is how to set the indentation of the first line of CSS. Beginners must try it by themselves to see if your code can achieve the effect of indentation of the first line. For more related tutorials, please visit CSS Online Manual.

The above is the detailed content of How to indent the first line of a paragraph by two characters in CSS (detailed graphic and text explanation). For more information, please follow other related articles on the PHP Chinese website!