Line Height

A visitor to one of my other sites wanted to know if there was a way to control the space between lines of text. Naturally, I told him I'd tell him if he'd send me 3 bottle caps, a moon rock, and a rubber chicken. I'll tell you how for free, though. :o)

You can set the line height for paragraphs with a little CSS in your style sheet, or embed the following code in the HEAD section of your HTML document:

<style type="text/css">
p {line-height: 20px;}
</style>

As you can see in this paragraph, line height really does work. There are no extra <br> or <p> tags, nor any other tricks used to set these lines farther apart. Just change the 20px to however many pixels apart you want your lines to be.

In this paragraph, you can see that you can narrow the space between lines as well as expand it. Hey, it's getting really crowded here! It does show you that you can control the line spacing in either direction, though, so how about that!

If you're wondering how I made one paragraph with a line height that is spread apart farther than normal and another with lines that crowd together, yet also have normal paragraphs all on the page; it's because I'm from the 4th dimension.

Okay, I'm not really from the 4th dimension. I just created my own class of tags. Go through the 3-part Introduction to CSS to see how to create a class. In case you're wondering about it now, I'm really from the 7th dimension.

Web Design

Site Information

More Boogie Jack Sites

Line Height