Recipe 2.7. Removing Space Between Headings and Paragraphs

Problem

You want to reduce the space between a heading and a paragraph.

Solution

Set the margin and padding for both the heading and paragraph to zero:

h2 {  margin: 0;  padding: 0; } p {  margin: 0;  padding: 0; }

Discussion

Browsers have their own internal style sheet that dictate the default values for HTML elements. These styles include predetermined values for margin and padding of elements for headings and paragraphs.

These default values makes it easy for people to read non-styled documents, but are often not desired by web developers.

To remove the default spacing between the viewport (sometimes referred as the browser window) and the elements within a web page, set the margin and padding of the body element to a value of zero.

See Also

Review CSS 2.1 specification's default style sheet for HTML 4 at http://www.w3.org/TR/CSS21/sample.html.