Make a space between paragraph (X)HTML and CSS

Question

I want space between my <p>content</p> tags. Not before and not after <p> tags. For example, 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 JavaScript/jQuery?

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

score 14 · Accepted Answer · edited Oct 01 '22 at 22:03

14

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

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

edited Oct 01 '22 at 22:03

Peter Mortensen

30,738
21
105
131

answered Sep 23 '09 at 06:13

Quentin

914,110
126
1,211
1,335

Nice, I'll try that. I'm aiming for IE7+, Chrome, Safari 4+, FireFox 2+ – Lasse Espeholt Sep 23 '09 at 06:17

score 4 · Answer 2 · edited Oct 01 '22 at 22:12

4

If you're not required to support Internet Explorer 6 (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.

edited Oct 01 '22 at 22:12

Peter Mortensen

30,738
21
105
131

answered Sep 23 '09 at 06:19

cletus

616,129
168
910
942

But the problem with the last method is, that if I have a list after the h1 then they will float into eachother. I will go with IE7+. – Lasse Espeholt Sep 23 '09 at 06:23
If you can go with IE7+ then you are sorted. I'm just pointing this out for completeness because many do need to support IE6 still (sadly). – cletus Sep 23 '09 at 06:30
Also, it's worth pointing out that I wouldn't suggest doing this for all divs. I'd associate a class to put on the div where you want to do this where you know the format of the contents to avoid the situation like you mention. The same heading followed by list issue has the same problem with using the + selector. – cletus Sep 23 '09 at 06:43

score 2 · Answer 3 · answered Sep 23 '09 at 06:13

2

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

answered Sep 23 '09 at 06:13

da5id

9,100
9
39
53

1

I can't do that because the text is rendered with CMS. – Lasse Espeholt Sep 23 '09 at 06:16
OK then, how about setting margin-top to "div p" and negative margin-bottom to "div h1"? – da5id Sep 23 '09 at 06:18
I have not tested it but cletus solution with p + p works fine for IE7+. That will do... I hope ;) Thanks :) – Lasse Espeholt Sep 23 '09 at 06:36

score 0 · Answer 4 · answered Sep 23 '09 at 06:11

0

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

?

answered Sep 23 '09 at 06:11

1

Thanks for reply, but I can't control the text that way. (CMS) – Lasse Espeholt Sep 23 '09 at 06:19

score 0 · Answer 5 · answered Sep 23 '09 at 06:13

0

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

answered Sep 23 '09 at 06:13

James Skidmore

49,340
32
108
136

1

Thanks for reply, but I can't control the text that way. (CMS) – Lasse Espeholt Sep 23 '09 at 06:18

score 0 · Answer 6 · edited Oct 01 '22 at 22:04

0

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.

edited Oct 01 '22 at 22:04

Peter Mortensen

30,738
21
105
131

answered Sep 23 '09 at 18:07

rhodesjason

4,904
9
43
59

Make a space between paragraph (X)HTML and CSS

6 Answers6