CSS Tutorial Lesson 19: Text Spacing

Another text formatting in CSS is to manipulate spacing in the text. There are three kinds of text spacing, namely line-height, letter-spacing and word-spacing.

19.1 Line-Height

The line-height property specifies the spacing between lines of text. The value of line-height can be in pixel or em where 1 em=16px. The syntax is as follows:

p{line-height: 1.2 em}

Example 19.1

Line Height

Another text formatting in CSS is to manipulate spacing in the text. There are three kinds of text spacing, namely line-height, letter-spacing and word-spacing.The line-height property specifies the spacing between lines of text. The line-height for this paragraph is 18px.

Another text formatting in CSS is to manipulate spacing in the text. There are three kinds of text spacing, namely line-height, letter-spacing and word-spacing.The line-height property specifies the spacing between lines of text.The line-height for this paragraph is 2.0em.

The Output

Another text formatting in CSS is to manipulate spacing in the text. There are three kinds of text spacing, namely line-height, letter-spacing and word-spacing.The line-height property specifies the spacing between lines of text. The line-height for this paragraph is 18px.

Another text formatting in CSS is to manipulate spacing in the text. There are three kinds of text spacing, namely line-height, letter-spacing and word-spacing.The line-height property specifies the spacing between lines of text. The line-height for this paragraph is 2.0em.

19.2 Letter Spacing

We can manipulate spacing between letters in CSS using the letter-spacing property. The value can be in pixel or em.The syntax is as follows:

h1{letter-spacing:0.3em}

Example 19.2

Spacing of 10 px

Spacing of 0.5em

The output

Spacing of 10 px

Spacing of 0.5em

19.3 Word Spacing

We can also manipulate spacing between words using the word-spacing property. The value can be in pixel or em. The syntax is as follows:

p{word-spacing:0.5 em}

Example 19.3

 We can also manipulate spacing between words using the word-spacing property. The value can be in pixel or em

 We can also manipulate spacing between words using the word-spacing property. The value can be in pixel or em

The Output

We can also manipulate spacing between words using the word-spacing property. The value can be in pixel or em

We can also manipulate spacing between words using the word-spacing property. The value can be in pixel or em