CSS Text Spacing

Text Spacing

Text spacing in css consists of following properties -

1. text-indent
2. letter-spacing
3. line-height
4. word-spacing
5. White-space

We will see them one by one in detail  - 

1. Text-Indent - 

The text-indent property is used to specify an indent on the first line of text in a block element.

The text-indent property specifies how much horizontal space text should be moved before the beginning of the first line of the text content of an element. 

Syntax - 

text-indent: value;

Now we will see example - 

Example  -

Output - 

2. Letter-spacing

This property is used to specify the space between each character in a line of text.

Syntax - 

letter-spacing: value;

Now we will see an example  -

Example - 

Output  - 

3. line-height

The line-height property controls the height of each line of text. It can be used to add spacing between lines of tex

Now we will see example - 

Example- 

Output - 

4. Word-spacing

The word-spacing property specifies the spacing behavior between tags and words.

Possible values  - 

• a positive or negative length (using em px vh cm etc.) or percentage (using %) 
• the keyword normal uses the font's default word spacing 
• the keyword inherit takes the value from the parent element

Example - 

Output - 

5. White-space-

The white-space property is used to specify how whitespace is handled inside an element that contains text. 

The default value is normal. 

With this value, sequential whitespace characters are collapsed. 

If the text content exceeds the width of its container, it will be wrapped to the next line. 

You may have seen this behavior before, when you have multiple consecutive spaces in your HTML, or line breaks, and they are ignored by the browser.

Now we will see example - 

Example –  Setting white-space to pre

Output -