Lesson 19: Text Spacing in CSS

❮ Previous Lesson Next Lesson ❯

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

<!DOCTYPE html>
<html>
<head>
<title>Line-height</title>
<style type=”text/css”>

.InPixel {line-height: 18px;}
.InEM {line-height: 2.0em;}
</style>

</head>
<body>
<h1>Line Height</h1>
<p class="InPixel">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.</p>
<p class="InEM">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.</p>
</body>

</html>

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

<h1 style="letter-spacing: 10px;">Spacing of 10 px</h1>
<h1 style="letter-spacing: 0.5em;">Spacing of 0.5em</h1>

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

<p style="word-spacing:0.5em"> We can also manipulate spacing between words using the word-spacing property. The value can be in pixel or em</p>

<p style="word-spacing:16px"> We can also manipulate spacing between words using the word-spacing property. The value can be in pixel or em</p>

The Output

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

❮ Previous Lesson Next Lesson ❯