How css indents the first line of a paragraph on a Web page
Editor to share with you how css indents the first line of the paragraph on the Web page. I hope you will get something after reading this article. Let's discuss it together.
Indent the first line of a paragraph on a Web page, which is one of the most common text formatting effects.
CSS provides the text-indent attribute, which makes it easy to indent text.
By using the text-indent attribute, the first line of all elements can be indented to a given length, or even a negative value.
The most common use of this attribute is to indent the first line of a paragraph. The following rule indents the first line of all paragraphs by 5 em:
P {text-indent: 5em;}
Note: in general, you can apply text-indent to all block-level elements, but you cannot apply this attribute to inline elements, nor can you apply text-indent attributes to replacement elements such as images. However, if there is an image in the first line of a block-level element, such as a paragraph, it moves with the rest of the text of the line.
Tip: if you want to "indent" the first line of an inline element, you can use the left inner or outer margin to create this effect.
Use negative valu
Text-indent can also be set to a negative value. With this technique, you can achieve many interesting effects, such as "hanging indentation", in which the first line is suspended to the left of the rest of the element:
P {text-indent:-5em;}
Be careful when setting negative values for text-indent, however. If you set a negative value for a paragraph, some of the text on the first line may exceed the left boundary of the browser window. To avoid this display problem, it is recommended that you set an outer margin or some inner margin for negative indentation:
P {text-indent:-5em; padding-left: 5em;} after reading this article, I believe you have some understanding of "how css indents the first line of a paragraph on a Web page". If you want to know more about it, welcome to follow the industry information channel, thank you for reading!
