Understanding line-heightThe 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):
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.
Understanding margin-top and margin-bottomThat'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).
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?
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.
ConclusionIn 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.
Got a LiveJournal account? Keep up with the latest articles in this FAQ by adding our syndicated feed to your friends list!