
Overcoming Line-Spacing Difficulties
L
ine spacing is a major issue and a common problem for Web designers. A design often calls for lines to be
tightly spaced, but also to be of various sizes. If you use the break tag to separate your lines, you get the tight
spacing required, but you won’t be able to make each line a different heading size. As far as HTML and your
browser are concerned, the text is still one block element, no matter how many line breaks are inserted. If, on
the other hand, you make each line a separate paragraph or heading, the line spacing is unattractively open.
The best solution for controlling spacing within a text block is to use the CSS line-height property. The major-
ity of browsers now in use support line spacing through CSS and you can set the line height in pixels, ems, or
percentages.
Often I like to fit my heading and initial following paragraph tightly together. To accomplish this, you need to
adjust both the margin-bottom of the heading and the margin-top of the paragraph. If you want all your head-
ings to work this way, you can set that up in a single CSS rule:
h1, h2, h3, h4, h5, h6 { margin-bottom: 0 }
It’s not a good idea to apply a corresponding zero margin-top to the p tag, because that would affect all para-
graphs. A better approach is to create a class with the right property and use as needed:
.firstParagraph { margin-top: ...