Search code examples
textmarginspaceparagraphgaps-in-visuals

Heading and paragraph text together without space

I have -

<p>some text as 'intro'</p>
<h1>Big Text</h1>
<p>some text as 'outro'</p>

I have this set out on a background image, I have styled margins and fitted the text inside properly, but I want to bunch up ALL text so there is little gap - line-height would ruin it and I have tried seperate div tags but no luck - what is the best chosen css method for this?

Thanks!

Solution

  • If you require the use of those elements you could use negative margins:

    <p>some text as 'intro'</p>
<h1 style="margin: -15px 0 -15px">Big Text</h1>
<p>some text as 'outro'</p>

    A better way is probably to separate the different lines by line breaks and to style the 'header' line, like so:

    <p>some text as 'intro'<br />
<span style="font-size: 200%; font-weight: bold;">Big Text</span><br />
some text as 'outro'</p>