Css text left indent

CSS text-indent Property

The text-indent property specifies the length of empty space of the first line in a text block. The direction of the text is specified by the direction property. If a negative value is specified, the first line will be indented to the left. The text-indent only applies to the first line of text in an element.

Initial Value	0
Applies to	Block containers.
Inherited	Yes.
Animatable	Yes. Text-indent is animatable.
Version	CSS1
DOM Syntax	object.style.textIndent = «100px»;

Syntax

text-indent: length | percentage | each-line | hanging | initial | inherit;

Example of the text-indent property:

html> html> head> title>Title of the document title> style> p < text-indent: 100px; > style> head> body> h2>Text-indent property example h2> p> This is same text with text-indent property. This is same text with text-indent property. This is same text with text-indent property. This is same text with text-indent property. This is same text with text-indent property. This is same text with text-indent property. p> body> html>

Result

Example of the text-indent property specified in «pt», «em», «%» and «cm»:

html> html> head> title>Title of the document title> style> div.a < text-indent: 20pt; > div.b < text-indent: -5em; > div.c < text-indent: 70%; > div.d < text-indent: 4em; > div.e < text-indent: 5cm; > style> head> body> h2>Text-indent property example h2> h3>text-indent: 20pt h3> div class="a"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. div> h3>text-indent: -5em h3> div class="b"> Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. div> h3>text-indent: 70% h3> div class="c"> Lorem Ipsum is dummied text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. div> h3>text-indent: 4em h3> div class="d"> Lorem Ipsum is dummied text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. div> h3>text-indent: 5cm h3> div class="e"> Lorem Ipsum is dummied text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. div> body> html>

Values

Value	Description	Play it
length	Specifies the indentation in px, pt, cm, em, etc. The default value is 0. Negative values are allowed.	Play it »
percentage	Specifies the indentation in percentage of the width of the containing block.	Play it »
each-line	Indentation affects the first line as well as each line after a forced line break, but does not affect lines after a soft wrap break.This value is an experimental technology.
hanging	Inverts which lines are indented. First line is not indented.This value is an experimental technology.
initial	Makes the property use its default value.	Play it »
inherit	Inherits the property from its parents element.

Browser support

Источник

CSS text-indent Property

The text-indent property specifies the indentation of the first line in a text-block.

Note: Negative values are allowed. The first line will be indented to the left if the value is negative.

Default value:	0
Inherited:	yes
Animatable:	yes. Read about animatable Try it
Version:	CSS1
JavaScript syntax:	object.style.textIndent=»50px» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

Property Values

Value	Description	Demo
length	Defines a fixed indentation in px, pt, cm, em, etc. Default value is 0. Read about length units	Demo ❯
%	Defines the indentation in % of the width of the parent element	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

CSS — How to indent text in HTML documents

Posted on Aug 27, 2021

The CSS text-indent property is a style property that allows you to put empty stapce before the first line of a paragraph to make it easier to read.

The text-indent property accepts number value in CSS units ( px , em , rem )

Now let’s try to apply some indent to an HTML 
and tags. I’m going to make the indent 50px to make it easier to spot:

      The result will be as follows. The indentation is marked with the red bars:

The text-indent property follows the direction property value, so if you have a right-to-left text, just add the direction property to your HTML elements:

  Next, let’s look at how you can indent the whole paragraph and not just the first line.

CSS indent the whole paragraph

Keep in mind that the indentation using text-indent property will only affect the first line even when you use the
tag to force a hard break between the lines:

The following HTML document:

   Will produce the following output:

To solve this issue, there’s an experimental CSS specification for text-indent property called each-line that’s supposedly indent each line of the paragraph separated using
tag.

But since this value is experimental, it’s not supported by the browsers yet.

When you need to indent the whole paragraph and not just the first one, then you need to use the padding-left property (or padding-right when you have right-to-left text direction)

For example, let’s create a new CSS class selector called indent-all that has the padding-left:50px style applied:

      Since padding-left creates empty space on the left side of your content, your content will be indented no matter when you use hard break or soft break.

The HTML above will produce the following output:

Now if you have a right-to-left text direction, then you need to use padding-right instead of padding-left .

The following CSS rule should be used for right-to-left direction:

Now you just need to add both classes above to the HTML tag with right-to-left direction that you want to indent.

Learn JavaScript for Beginners 🔥

Get the JS Basics Handbook, understand how JavaScript works and be a confident software developer.

A practical and fun way to learn JavaScript and build an application using Node.js.

About

Hello! This website is dedicated to help you learn tech and data science skills with its step-by-step, beginner-friendly tutorials.
Learn statistics, JavaScript and other programming languages using clear examples written for people.

Search

Type the keyword below and hit enter

Tags

Click to see all tutorials tagged with:

Источник

HTML Indent

Indentation is the blank space between the margin and the beginning of a line of text. Text indentation improves readability by setting the length of empty white space before lines of text in a block to mark the beginning of a paragraph. This article is a guide on how you can indent content on your webpage and why it is important to do so.

The following image contains two pieces of text. It can be seen that the second one looks more organized and readable because of proper indentations.

Pre-requisites

What are We Creating?

In this article, you shall learn to indent content in HTML. You shall use the following two properties:

• margin-left — To indent an entire block of text.
• text-indent — To indent only the first line of text.

How to Indent in HTML?

Example 1: Using the margin-left property

The margin-left property adds a margin to the left of an element. The required amount of indentation is applied to the whole block of text. The amount of space can be specified using absolute or relative values.

It is possible to achieve text indentation using an inline style within HTML. In the following example using margin-left , the entire text in the paragraph tag is indented 25 pixels from the left.

Example 2: Using the Text-indent Property

The text-indent property adds space to the left of the first line of text in a paragraph. The required amount for HTML indent is specified using absolute or relative values.

It is possible to achieve text indentation using an inline style within HTML. In the following example using text-indent , the first line of the paragraph tag is indented 25 pixels from the left.

Note: The CSS properties of text-indent and margin-left have the same name as their HTML inline properties. So, in CSS the properties and their values are mentioned within the desired selector. Use the style tag in the HTML head or an external stylesheet to include the CSS code.

Commonly Used Examples of Indentation in HTML

Unordered lists

The li elements nested inside their parent ul , are indented to the right by two spaces.

Ordered lists

The li elements nested inside their parent ol , are indented to the right by two spaces.

Why is Indentation Important?

Indentation improves readability. Maintaining proper indentation is a good practice as this makes text readable and enhances user experience.

It is clearly visible how adding indentation makes your document look more organized.

Conclusion

• Indentation is the blank space between the margin and the beginning of a line in a text block.
• HTML text-indent property helps to set the desired value for indentation.
• HTML indent is observed in li items under ol and ul .
• The text-indent property is applied using the selector rule in CSS and as an inline style in HTML.
• The text-indentation value can be absolute like pixels (px) or relative like em, rem, or % of the overall element width.
• margin-left indents the entire text block, whereas text-indent indents the first line of the paragraph.

Источник