bugl
bugl
HomeLearnPatternsPathsSearchPremium
HomeLearnPatternsPaths

Loading lesson path

Learn/CSS/CSS Foundations
CSS•CSS Foundations

CSS Text Spacing

CSS has several properties to control text spacing.

In this chapter you will learn about the following properties:

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

CSS Text Indentation

The CSS text-indent property is used to specify the indentation of the first line in a text-block.

Tip

Negative values are allowed. The first line will be indented to the left if the value is negative.

Example

Formatted code
p {
  text-indent: 50px;
}

Live preview

CSS Letter Spacing

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

Tip

Negative values are allowed.

Example

Formatted code
h1 {
  letter-spacing: 5px;
}
h2 {
  letter-spacing: -2px;
}

Live preview

CSS Line Height

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

Note

Negative values are not allowed.

Example

Formatted code
p.small {
  line-height: 0.8;
}
p.big {
  line-height: 1.8;
}

Live preview

CSS Word Spacing

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

Tip

Negative values are allowed.

Example

Formatted code
p.one {
  word-spacing: 10px;
}
p.two {
  word-spacing: -2px;
}

Live preview

CSS White Space

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

This property can have one of the following values:

  • normal
  • nowrap
  • pre
  • pre-line
  • pre-wrap

Example

Formatted code
p {
  white-space: nowrap;
}

Live preview

The CSS Text Spacing Properties

PropertyDescription
letter-spacingSpecifies the space between characters in a text
line-heightSpecifies the line height
text-indentSpecifies the indentation of the first line in a text-block
white-spaceSpecifies how to handle white-space inside an element
word-spacingSpecifies the space between words in a text

Previous

CSS Text Transformation

Next

CSS Text Shadow