If you hadn’t figured it out yet, I’m a big fan of white space. On the outside edge of the page (see page margins). Between capital letters (see letterspacing). Within table cells (see tables). Between paragraphs (see space between paragraphs).
And now, above and below a heading, as a form of emphasis. To show you what I mean, let me ask you something. DO YOU FIND THIS TO BE AN INVITING FORM OF EMPHASIS?
Or do you prefer this?
Well, there you have it.
Space above and below works on the page for the same reason a dramatic pause works when you’re talking. You draw a listener’s attention through contrast. Loudness is an effective form of contrast. But so is silence.
Likewise with the written word. Formatting tools like point size, color, and bold or italic have a role to play. But careless typographers mate them indiscriminately, breeding noise. Space above and below gives you emphasis without adding a single mark to the page.
margin-top
and margin-bottom
properties
How much space to add is a judgment call. Semantically, headings relate to the text that follows, not the text before. Thus you’ll probably want the space below to be smaller than the space above so the heading is visually closer to the text it introduces.
There is an upper limit. For instance, on a website, you wouldn’t want to add so much space before a heading that it disappears below the bottom of the browser.
If you’re already using space between paragraphs, the space you add around a heading should be larger, to create a distinction.