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.
Next: Scrollbars in CSS >>
More Style Sheets Articles
More By James Payne
/ 2 
