Text Spacing

CSS provides several properties to handle spacing, which allows us to control the spacing between characters and words.

This property is useful for adjusting the visual appearance of text, such as increasing or decreasing the space between letters or words for emphasis or design purposes.

letter-spacing:

Sets the spacing between characters.

Example:

p {
  letter-spacing: 4px;
}

word-spacing:

Example:

p {
  word-spacing: 10px;
}

Sets the spacing between words.

Example:

p {
  line-height: 1.5rem
}

line-height:

Example:

p {
  white-space: break-spaces; // other options: nowrap, normal, pre;
}

Sets the height of a line of text.

white-space:

Specifies how white space inside an element is handled.

Note:

Negative values can be used to decrease the space between characters, causing them to overlap.
Please be careful when using large "letter-spacing", "word-spacing", and "line-height" values, as excessive spacing can negatively impact readability. It's usually recommended to use subtle adjustments for better visual appeal.

<-- CSS Text

Text Indent -->