Text Spacing in CSS

CSS has several properties to control text spacing:

Preserving/Collapsing Whitespace with CSS

CSS Syntax

white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;
Property Values
Value Description
normal Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default
nowrap Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a <br> tag is encountered
pre Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the <pre> tag in HTML
pre-line Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks
pre-wrap Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element.

CSS Line Height

The CSS line-height property is used to specify the space between lines. Negative values are not allowed.

An example whereby the space between lines is specified (default is 1.0):

p.small {
  line-height: 0.8;
}

p.big {
  line-height: 1.8;
}

CSS Text Indentation

The CSS text-indent property is used to specify the indentation of the first line in a text-block. Negative values are allowed. The first line will be indented to the left if the value is negative.

Example

p {
  text-indent: 50px;
}

CSS Word Spacing

The CSS word-spacing property is used to specify the space between the words in a text. Negative values are allowed.

An example whereby the space between words is increased or decreased:

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

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

CSS Letter Spacing

The CSS letter-spacing property is used to specify the space between the characters in a text. Negative values are allowed.

An example where the space between characters is increased or decreased:

h1 {
  letter-spacing: 5px;
}

h2 {
  letter-spacing: -2px;
}