Paragraph spacing when preceded by a header

gnubie · Oct 11, 2010

thread215-1530910

If you want a single line break before each paragraph, but when preceded by a header, you want the paragraph to be on the next line (WITHOUT a BLANK line) use the adjacent selector method.

For example, when you want:

Header 1
Paragraph 1

Paragraph 2

...

Use the adjacent selector method. For example:

[blue]
h2+p {
margin-top: 0; /* this will only affect a paragraph that immediately follows h2 */
}
h2 {
display: inline; /* this is required. */
}
[/blue]

I added this new posting and linked it to an old thread to point out the need to have "display: inline;" within the h2 selector. The h selector defaults to display: block and it might take awhile to discover the display: inline requirement.

ChrisHunt · Oct 13, 2010

I don't see why you do need to make the <h2> display:inline;, just make sure you remove the bottom margin of the h2 as well as the top margin of the p:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] dir="ltr" lang="en-GB">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Margin Test</title>
  <style type="text/css">
    h2   { margin-bottom: 0; padding-bottom: 0; }
    h2+p { margin-top: 0; padding-top: 0; }
  </style>
</head>
<body>
  <h2>Test Title</h2>
  <p>Test Para</p>
</body>
</html>

For completeness, I've zeroed any padding too.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

gnubie · Oct 14, 2010

To Chris Hunt --

Good point. You are right.

A display: inline is not specifically needed, but to eliminate the space, one needs either the display: inline or margin-bottom: 0 statement. So, you can eliminate the new line (w/display: inline) OR make the new line have 0 space (margin-bottom: 0).

I like your suggestion best and will use it in the future, including the padding-bottom: 0. I think it is more intuitive.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Paragraph spacing when preceded by a header

gnubie

Programmer

ChrisHunt

Programmer

gnubie

Programmer

Similar threads

Part and Inventory Search

Sponsor