You can increase the amount of space that your text takes up with two very useful CSS properties. These are line spacing and letter spacing, which are very useful attributes when you want to make it look like you've done more work than you really have...
Letter spacing
To increase the spacing between the lettering within an element, you use the letter-spacing property. If I wanted to make the letters of a paragraph exactly 5 pixels away from each other:
<p style="letter-spacing: 5px;">Woohooo, each letter has personal space :)</p>
Output
Woohooo, each letter has personal space :)
Line Height
Line spacing lets you control how much height a line has, or in other words how further a new line will be below it's previous line:
This is example shows that by specifying 0px for this property, when there is a new line it will start at the same position on the page as the previous line.
<p style="line-height: 0px;">Hello world, this paragraph has been made quite long so that we can demonstrate that with each new line comes a reasonable amount of spacing.</p>
Output
Hello world, this paragraph has been made quite long so that we can demonstrate how the line spacing property works.
It's not very readable though, so I don't recommend it!
This example shows that by specifying 30px for this property, any new line will be 30px below the start of it's previous line.
<p style="line-height: 30px;">Hello world, this paragraph has been made quite long so that we can demonstrate that with each new line comes a reasonable amount of spacing.</p>
Output
Hello world, this paragraph has been made quite long so that we can demonstrate how the line spacing property works.
You can also specify the line-height property in percent:
.half-way-there
{
line-height: 50%;
}
The above will move each new line down the amount of 50% of the height of the line.
And finally you can specify line-height relatively to it's default value, which is simply the height of the line:
.nice-and-easy
{
line-height: 1;
}
The above would just appear as it normally would. Specifying 0.5 would produce the same effect as our "half-way-there" example.
If you don't believe what I've told you in this chapter and need proof, try it yourself! Then take the quiz before proceeding to the next chapter.