Make a space between paragraph (x)html, css

Question

Hi,

I want space between my <p>content</p> tags. Not before and not after <p> tags. Fx my code is:

<div>
   <h1>A headline</h1>
   <p>Some text</p>
   <p>Some text</p>
</div>
Something

I don't want space between h1 and p which is done with zero margin on h1. But I don't want space after the last <p> tag. Is this possible without :last-child or some js/jQuery?

I can't set class="last" on the last tag because it is a CMS system.

Answer 1

<div>
   <h1>A headline</h1>
   <p>Some text</p>
   <div class="paragraph-space"></div>
   <p>Some text</p>
</div>

?

Answer 2

Set a default bottom-margin to p, then give the last tag a class with no bottom-margin.

Answer 3

p + p {
  margin-top: 1.5em;
}

(Although this requires a browser with better support for CSS than IE6)

Answer 4

<div>
  <h1>A headline</h1>
  <p>Some text</p>
  <p style="margin-bottom: 0;">Some text</p>
</div>

Answer 5

If you're not required to support IE6 you can use:

div, h1, p { margin: 0; }
p + p { margin-top: 12px; }

If you need to support IE6, this is a dirty hack but it works without Javascript:

div, h1, p { margin: 0; }
h1 { margin-bottom: -12px; }
p { margin-top: 12px; }

The disadvantage of this method is that you can't simply use, say, 1em for the balancing margins as they have different font sizes. You can either manually adjust as required or use pixel widths.

Answer 6

If you want to make it more browser compatible, you could also use:

p { margin-top: 24px; }
h1 { margin-bottom: -24px; } // play with this value as necessary

Negative margins will pull elements toward them. It's messier than I like, but when you are at the mercy of CMS generated code with no way to add classes, you have to be creative.