Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS Button has white margin/padding that cannot be removed

CSS Button has white margin/padding that cannot be removed

Problem

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".

I cannot simply fill this button with an image, because of some creative javascript that targets on the button-span-div combo formed.

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?

Thanks.

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.

Problem courtesy of: JHStarner

Solution

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

Solution courtesy of: Sergey Rybalkin

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS Button has white margin/padding that cannot be removed

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×