Geek Answers Handbook

Make a space between paragraph (x) html, css

I need the space between the <p>content</p> tags. Not earlier or after the <p> tags. Fx my code is:

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

I don't need the space between h1 and p, which runs with zero margin on h1. But after the last <p> I don't want a place. Is this possible without: last-child or js / jQuery?

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

+6
html xhtml space paragraph
source share
6 answers
 p + p { margin-top: 1.5em; }

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

+14
source share

If you do not require IE6 support, 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 cannot just use, say, 1em for balancing fields, since they have different font sizes. You can manually adjust as needed or use the width of the pixels.

+4
source share

Set the default lower limit to p, then give the last tag a class without a bottom margin.

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

?

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

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

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

Negative fields will draw elements to them. It's messy than I like, but when you're at the mercy of the CMS code you created without the ability to add classes, you have to be creative.

0
source share

More articles:


All Articles