Controlling text element margins

By default, browsers place margins around block-level text-based elements (such as headings
and paragraphs), which can be overridden by CSS. However, many designers get confused
when dealing with margins, so a good rule of thumb is to first remove all element
margins via the universal selector (see the “Zeroing margins and padding on all elements”
section in Chapter 2 for more information).
* {
margin: 0;
padding: 0;
}
Once you’ve done this, you should primarily control spacing between text elements via the
bottom margins:
h1, h2 {
margin-bottom: 10px;
}
p {
margin-bottom: 1em;
}
In the previous example, the margins below headings are small, enabling the eye to rapidly
travel from the heading to the related body copy. The margin at the bottom of each paragraph
is one character high.
Should you decide, after applying styles, that more room is required between paragraphs
and subsequent headings, apply a top margin to the relevant level (or levels) of heading,
but be aware that vertical margins collapse.
Later in the chapter, a few exercises will show how margins (along with various other settings)
can affect the way a page looks and feels. Certainly, margin definitions shouldn’t be
throwaway—like in music, where the gaps are almost as important as the notes, the whitespace
in typography is almost as important as the content.