Question

Is it possible—without adding an extra wrapper element—to offset the position of text in an HTML element without causing the background to also shift?

Motivation:

I have existing HTML markup (phpBB) and I’m styling some links to look like buttons so that they are visibly pushed down when :active (mouse button down). I have half of this working via a background change, but I want to also offset the text down and to the right 1 pixel.

Existing HTML markup (cannot be changed):

<a href="…"><span></span>Hello World</a>

Fiddle showing the effect and existing CSS (which can be changed): http://jsfiddle.net/szxPz/1/

Edit: I can get the text to move to the right with text-indent:1px; margin-right:-1px, but that still leaves the need to move the text down as well.

Answer 1

You should be able to achieve that by increasing the padding-top and decreasing the height by 1.