CSS Text Spacing

CSS (Cascading Style Sheets) Text Spacing refers to the control and adjustment of spacing-related properties for text within HTML elements using CSS. These properties allow web developers to define the space between characters, words, and lines, as well as control other aspects of text layout. Here are some of the key CSS properties related to text spacing:

Text Spacing

text-indent
letter-spacing
line-height
word-spacing
white-space

Text Indentation

The text-indent property is used to specify the indentation of the first line of a text:

Example

p {
  text-indent:  50px;
}

You can click on above box to edit the code and run again.

Output

In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'

Letter Spacing

The letter-spacing property is used to specify the space between the characters in a text.
The following example demonstrates how to increase or decrease the space between characters:

Example

h1 {
  letter-spacing: 5px;
}

h2 {
  letter-spacing: -2px;
}

You can click on above box to edit the code and run again.

Output

This is heading 1

This is heading 2

Line Height

The line-height property is used to specify the space between lines:

Example

p.small {
  line-height: 0.8;
}

p.big {
  line-height: 1.8;
}

You can click on above box to edit the code and run again.

Output

This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.

This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.

Word Spacing

The word-spacing property is used to specify the space between the words in a text.
The following example demonstrates how to increase or decrease the space between words:

Example

p.one {
  word-spacing:   10px;
}

p.two {
  word-spacing:   -2px;
}

You can click on above box to edit the code and run again.

Output

This is a paragraph with larger word spacing.

This is a paragraph with smaller word spacing.

White Space

The white-space property specifies how white-space inside an element is handled.

This example demonstrates how to disable text wrapping inside an element:

Example

p {
  white-space: nowrap;
}