Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make a space between paragraph (x)html, css

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.

like image 895
Lasse Espeholt Avatar asked Sep 23 '09 06:09

Lasse Espeholt


2 Answers

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

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

like image 114
Quentin Avatar answered Sep 30 '22 17:09

Quentin


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.

like image 29
cletus Avatar answered Sep 30 '22 15:09

cletus