CODEWITHSUNDEEP
htmlcss
JHStarner
JHStarner

Reputation: 173

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

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: https://i.sstatic.net/WihUt.jpg.

Upvotes: 1

Views: 1680

Answers (3)

Sergey Rybalkin
Sergey Rybalkin

Reputation: 3026

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

Upvotes: 1

Dion
Dion

Reputation: 3335

Just change the width of .arrow-button span to 83px and add height: 14px;.

Upvotes: 0

Elias Zamaria
Elias Zamaria

Reputation: 101053

  • Set the border-width property on .arrow to 9px 14px.
  • Set the font-size property on .arrow-button to 0.
  • Set the width property on .arrow-button span to 84px.
  • Set the font-size property on .arrow-button span to 12px or whatever seems reasonable.

Upvotes: 0

Related Questions