Search code examples
htmlcss

Decreasing spacing between two lines in HTML


HTML n00b here. I can't paste my actual code because it's from work, but basically I have

<p>Some text</p>
<p><a href="SomeSite.com">Some more text</a></p>

and I want those lines to be stacked on top of each other while the rest of the lines on the page maintain their normal spacing between each other.

I tried doing

<p style="padding-bottom: 0px">Some text</p>
<p><a style="padding-top: 0px" href="SomeSite.com">Some more text</a></p>

but that didn't work. It seems like it should work.

Please show me how to do it in proper HTML fashion and explain why my attempt failed.


Solution

  • You will want to do something like this:

    <p>Some Text <br /> <a href="">Some more text</a></p>
    

    The <br /> is a line break, so you can have everything in 1 paragraph and the line break will bring the next line under the first. Then, you can use line-height:10px

    <p style="line-height:10px;">Some Text <br /> <a href="">Some more texth</a></p>
    

    You can change your px size to whatever.

    If you NEED to have two separate paragraphs, you can enclose them in a container and give the line-height to the container.

    <div style="line-height:10px">
        <p>line 1</p>
        <p><a>line 2</a></p>
    </div>