CSS Text Spacing

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 - 
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 -