CSS Button Overflow Problems

[Martot]

Right, I've had a problem with CSS buttons which I've ignored for a good few years now, and feel that now is the time to square this one away.

The problem is that any CSS button that sits within a hyperlink container, i.e. <a>[BUTTON CODE]</a> overflows the link container.

I've always worked around this by padding out the surrounding divs accordingly to avoid nasty overlap. An example of what I mean is posted in the image attached (blue box smaller than button which overlaps image).

Now this must be a really simple problem to solve right - I just declare the "a" entry in my style sheet to be the same height or bigger than the CSS buttons, but only for buttons, so I've tried
A SPAN.cssbutton {height:XXpx;}

...but this doesn't work.. I've tried playing around with overflow statements, block vs inline display, etc etc, but nothing works. Always the link container wants to be smaller than the button inside it.

I haven't posted any css code yet, as my guess is that the solution is blindingly obvious to anyone who knows more than me about css, but I can if anyone needs it.