CSS Button has white margin/padding that cannot be removed
I am working on a page that someone long ago created. One of the things they didn't care about much was the finished button design for one of the buttons on this page. I'm back in this program/page, and decided I'd try to make it look better, and for the life of me I cannot fix this issue.
Here is a Fiddle of the button: http://jsfiddle.net/h5CkS/
The white space, no matter what I do, will not go away. I have not been able to find a way to fill it, "paint" over it with the span/div, or anything. If I try to tweak an element to be wider, or fill up the padding, it just restacks the "New" under "Unvet".
So I have to somehow tackle this with the CSS. Is there anything that anyone can think of how I can be rid of that damned whitespace?
EDIT: Just to show how frustrating this is. I played with the Fiddle and made this:http://jsfiddle.net/h5CkS/6/ which looks perfect. But when I put that into the page code, I get this: http://i.imgur.com/PXJZi.jpg.
I have created a fork of your Fiddle - http://jsfiddle.net/GXU4w/8/ Changes are:
1) Negative margin on spans
2) border-width: 1px on button
This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here