So far in this series we have covered the basic syntax of CSS, how to work with backgrounds, text, fonts, borders, outlines, margins, cell padding, lists, and tables. Starting in this tutorial we will cover some of the more advanced CSS techniques, beginning with using the various dimension properties. There are quite a few, and hopefully we will cover all of them in this article.
CSS: Dimensions - Setting the Space Between Lines (Page 4 of 5 )
There are three methods for setting the space between lines. The first, shown below, is done by using the percent value:
<html>
<head>
<style type="text/css">
p.smoosh {line-height: 80%}
p.open {line-height: 300%}
</style>
</head>
<body>
<p>
I am your standard paragraph- no muss no fuss. Average sized. Not too skinny, not too fat. Just right.
</p>
<p class="smoosh">
I have an eating disorder. I don't like spices or sauces on my food and I eat a crapload of ice. I shop at Gap Kids even though I am forty-nine years old. One time I locked myself out of the house but it was okay because I was able to slip underneath the crack in the door.</p>
<p class="open">
I'm not very close to the other sentences in this paragraph. To be quite frank, they all smell rather funny, like a hot dog someone left on the road too long maybe or a hippie. Yeah...you would keep your distance if you were me too...
</p>
</body>
</html>
Here's how you would set the space between lines using pixels:
<html>
<head>
<style type="text/css">
p.smoosh {line-height: 10px}
p.open {line-height: 40px}
</style>
</head>
<body>
<p>
I am your standard paragraph- no muss no fuss. Average sized. Not too skinny, not too fat. Just right.
</p>
<p class="smoosh">
I have an eating disorder. I don't like spices or sauces on my food and I eat a crapload of ice. I shop at Gap Kids even though I am forty-nine years old. One time I locked myself out of the house but it was okay because I was able to slip underneath the crack in the door.</p>
<p class="open">
I'm not very close to the other sentences in this paragraph. To be quite frank, they all smell rather funny, like a hot dog someone left on the road too long maybe or a hippie. Yeah...you would keep your distance if you were me too...
</p>
</body>
</html>
Finally, you can use a number value to set the space between lines.
<html>
<head>
<style type="text/css">
p.smoosh {line-height: .5}
p.open {line-height: 3}
</style>
</head>
<body>
<p>
I am your standard paragraph- no muss no fuss. Average sized. Not too skinny, not too fat. Just right.
</p>
<p class="smoosh">
I have an eating disorder. I don't like spices or sauces on my food and I eat a crapload of ice. I shop at Gap Kids even though I am forty-nine years old. One time I locked myself out of the house but it was okay because I was able to slip underneath the crack in the door.</p>
<p class="open">
I'm not very close to the other sentences in this paragraph. To be quite frank, they all smell rather funny, like a hot dog someone left on the road too long maybe or a hippie. Yeah...you would keep your distance if you were me too...
</p>
</body>
</html>
Note that the last example is probably the one you are most used to if you have ever worked with a Word document and used its line spacing.
Style Sheets 
/ 3 
HTML5 Boilerplate Introduction
