CSS link:active state and margin moving whole site - css

Question

I want to move link a bit down when clicked, but when I try to do that using :active state everything below that button moves a bit too. What's the easiest fix to that (I don't want to mess too much with my HTML code, so maybe something css-related?).
HTML:
Test
<p>This paragraph moves when I click button above. I want to prevent that.</p>
CSS:
a { display: inline-block; }
a:active { margin: 5px 0 0 0; }
position:relative & top: 5px sounds like a good idea, but this doesn't work either (button moves 1px down for ever :/).
http://jsfiddle.net/JyZLF/

Answer 1

This may suit your needs:
a {
display: inline-block;
margin: 0 0 5px 0;
}
a:active {
margin: 5px 0 0 0;
}
http://jsfiddle.net/JyZLF/3/

Answer 2

personally, I wouldn't use margin for this, I would use:
a:active {
position:relative;
top:5px;
}
http://jsfiddle.net/seemly/jFrCj/1/
Much cleaner, less code and less likely to effect the rest of your layout, improving the future-proofing of your site.
Margin moves the element box itself, where as position relative leaves the box of the element where it is, but takes the element out of the flow of the document, allowing the movement of it anywhere you want without effecting anything else.

Answer 3

You could add position:relative to the a, then in the a:active, change it to top:5px. So your code will look like
a{display:inline-block; position:relative;}
a:active{top:5px;}
http://jsfiddle.net/JyZLF/7/
A positioning of relative basically says "You can move this element wherever you want on the page, but the space will stay where the element originally sat." The link had a default positioning of static, which means it follows in the normal flow of elements. So if you moved the margin down 5px, then everything below it will change

Answer 4

You could wrap the a in a div and then give that div a specified height, while also giving the a absolute positioning.
see below:
http://jsfiddle.net/8P93R/1/