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.
p + p {
margin-top: 1.5em;
}
(Although this requires a browser with better support for CSS than IE6)
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With