Modifying button padding shifts other elements down?

Question

I have been trying to create a button in CSS that appears to look "pushed down" on :active, to do this, I added 2px to padding-top and subtracted 2px from padding-bottom. However, this seems to add a margin to other elements, though I cannot figure out why.

I'm sure the solution is a simple one to experienced CSS-users.

http://jsfiddle.net/hTTWq/

Answer 1

You are using inline-block on the buttons who's default alignment is 'baseline`.

Try changing this by adding this to your buttton CSS

vertical-align: top; /* or middle or bottom */

JSfiddle Demo