A Smarter Way To Learn HTML & CSS(2015)

13
Spacing

You can create styles for text spacing. Let’s say your h2 heading normally looks like this. Sign up for the course now. If you create this style…

h2 {
letter-spacing: .1em;
}

…the h2 heading would add extra space between the letters. It would look like this…

Note that when you specify an em value for letter-spacing, it tells the browser how much more space you want beyond the normal spacing. Or how much less. Look at this style.

h2 {
letter-spacing: -.05em;
}

The code above tightens the space between letters, so the heading looks like this…

If you wanted to use default letter-spacing, you’d write…

h2 {
letter-spacing: 0;
}

Letter-spacing doesn’t distinguish between characters in the middle of a word and characters that begin or end a word. This means that letter spacing adjusts the space not only between characters in a word but also between the last character of a word and the first character of the next word. If you increase letter-spacing, the spacing between words increases automatically. If you compare the three examples above, you’ll see that space has opened up between words in the first and second examples.

If you want to adjust spacing only between words, use word-spacing.

I’ll exaggerate the word-spacing so you can clearly see it.

h2 {
word-spacing: 1em;
}

The CSS above styles the heading to look like this.

You probably won’t use word-spacing very often. The most common use for it is to slightly open up the space between bolded words, for better readability.

You can specify the spacing between text lines, known in the analog world as “leading,” by using line-height.

Here’s a paragraph with normal line-height.

Slow lorises are a group of several species of strepsirrhine primates which make up the genus Nycticebus. They have a round head, narrow snout, large eyes, and a variety of distinctive coloration patterns that are species-dependent.

Suppose you create this style.

p.more-readable {
line-height: 2em;
}

Any paragraph in the HTML file assigned the class “more-readable” would look like this.

In the case of line-height, 1.2em means normal line spacing. 1.8em would be roughly an extra half-line of spacing. 1em would be slightly tighter spacing than normal. In your CSS file code a paragraph class that increases letter-spacing, word-spacing, and line-height.

In your HTML file code a paragraph and assign it that class. Save the files and display your HTML file. Sample CSS code is at:
http://asmarterwaytolearn.com/htmlcss/practice-13-1.html.

Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-13-2.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/13.html

A Smarter Way To Learn HTML & CSS(2015)

13 Spacing

13
Spacing