WWW FAQs: How do I control the space between lines and paragraphs?

2007-06-04: CSS allows us to control the space between lines of text. CSS also allows us to control the space between paragraphs. But the two are not quite the same thing. And that distinction is understandably confusing. In this article, I'll explain the difference and show you how to control both properties.

Understanding line-height

The css line-height property controls the distance between lines within a block of text. When a paragraph such as this one is wider than the screen, the text automatically "wraps" to a new line. The height of each such line is controlled by the line-height CSS property.

We can easily control the line-height property. Just include this code in the head element of your page (or copy the CSS code to your standalone .css file):


<style>
body {
  line-height: 2.0;
}
</style>

When we set line-height to 2.0, we are saying that each line of text should be twice as tall as the font requires. A line-height of 1.0 would be enough to guarantee that characters in consecutive lines never collide, and 1.0 is the default in Firefox. A line-height of 2.0 provides a large, "double-spaced" gap between lines. And a line-height of 0.8 would result in collisions between characters— except, perhaps, if we know there are no lowercase characters in the text, and therefore no characters that descend below the "baseline" (as a lowercase g does).

We can also set line-height in pixels, or as a percentage of the height of the containing block. But I don't recommend doing that. Setting the line-height the usual way, as a multiple of the font size, avoids problems later when you decide to change the size of the font.

By default, the line-height property depends on the size of the text. If the font-size property is set to 16px, then the line-height will be at least 16 pixels. But the CSS specification doesn't require it to be absolutely equal to the font size. The specification simply says that the default value of line-height should be between 1.0 and 1.2. Different browsers have different defaults within this range. Explicitly setting line-height to 1.0 or a similar value is one way to force a more consistent appearance between different web browsers.
It's clear how line-height affects the spacing between lines when word wrap takes place. But how does it affect the spacing between paragraphs? It doesn't— well, not exactly. Although the spacing between paragraphs is controlled by a separate property, a new paragraph (a p element) does end the current line, and so the line-height is applied one more time before the paragraph spacing is applied.

Understanding margin-top and margin-bottom

That's all well and good, but what about paragraph spacing? What if we want to keep the normal spacing between wrapped lines, but introduce a larger spacing between paragraphs?

Paragraph spacing is controlled by the margin-top and margin-bottom CSS properties of the paragraph element. These can be set in terms of "ems," in terms of pixels, or using any other CSS measurement unit (but keep in mind that most other units don't work well in practice).

Why only ems or pixels?

Most current web browsers only implement two CSS units well: "ems" and pixels. One "em" is equal to the height required by the font itself in order to ensure that characters never collide. Since the size of an "em" changes automatically when you change the font-size property, working with "ems" saves you the grief of editing many margin properties every time you change the font size. And that's a good thing.

Pixels (the px unit), on the other hand, are handy when we really do want the paragraph spacing to stay the same even if the font height changes.

"But what about inches, millimeters, centimeters, picas and points?" In principle, these are all available. But in practice, the computer doesn't really know the width of the browser. So these aren't a great choice. For more information, see my article how do I make my site look good at any screen resolution?

By default, both Internet Explorer and Firefox effectively set a margin-top of 0em and a margin-bottom of 1em for paragraphs. The following code doubles the usual spacing between paragraphs without changing the height of individual lines:


<style>
p {
  margin-top: 0em;
  margin-bottom: 2em;
}
</style>

Setting margin-top to 0em is important because it prevents an extra paragraph gap from appearing in front of the first paragraph in the page, wasting vertical space you probably want for something else.

What happens if we set both margin-top and margin-bottom? The CSS specification says that when a top margin meets a bottom margin, only the larger of the two remains. This rule prevents wasted vertical space when two elements that both desire a margin meet.

Conclusion

In this article, we've learned how to control both line spacing and paragraph spacing. With these tools, we can take over the world... or at least format the world to our exact specifications. Hey, you have to start somewhere.

Share |

Legal Note: yes, you may use sample HTML, Javascript, PHP and other code presented above in your own projects. You may not reproduce large portions of the text of the article without our express permission.

Got a LiveJournal account? Keep up with the latest articles in this FAQ by adding our syndicated feed to your friends list!


Follow us on Twitter | Contact Us

Copyright 1994-2014 Boutell.Com, Inc. All Rights Reserved.