Padding a:active links without affecting whole line of text

HTML & CSS
1

Hey guys,

I’m having a problem, hopefully there’s a simple solution!

I have main nav links, and links throughout a small site that I want to move slightly downward when clicked, so I have tried using “a{ display: inline-block;}” and a:active{ padding-top: 2px;} to achieve this.

It works, but unfortunately in paragraphs when a link is clicked, the entire line shifts down 2px rather than just the link.

I’ve managed to fix this by floating all my links left, but obviously that’s not a good solution!

Is this possible to achieve? Even if there’s a javascript solution if css can’t do it?

Thanks for any help and replies!

2

Have you tried position:relative; top:2px;?

3

You absolute genius, many many thanks! I can’t believe I never thought of that, cheers Stevie