8

On my button tag (note: not input), I put the character "X". It looks all-right-ish. However, when I add a border, I realize that the character isn't really centered. There seems to be some kind of padding inside the button.

Is that something that can be removed? If so, how?

I've tried to add styles (the usual padding, margin, align and valign) but it didn't got me anything useful.

The problem looks like this jsFiddle.

<button style='width:18px;height:18px;'>X</button>
Konrad Viltersten
  • 36,151
  • 76
  • 250
  • 438
  • The padding may be built right in to the font. – bjb568 Feb 10 '14 at 07:34
  • look at this: http://jsfiddle.net/danield770/xChDn/ - there's no padding there – Danield Feb 10 '14 at 07:35
  • Can you create a fiddle? – Ruben Feb 10 '14 at 07:47
  • 1
    You may have to add `button::-moz-focus-inner { margin:0; padding:0}` See http://stackoverflow.com/questions/5517744/remove-extra-button-spacing-padding-in-firefox – Mr Lister Feb 10 '14 at 08:56
  • @Danield I'm getting the padding to appear as the jsFiddle in my edit shows. I took the liberty to add some thingies to your code. Kick me for forgetting to provide the jsFiddle in the first place, by the way. :) – Konrad Viltersten Feb 10 '14 at 09:26
  • @Ruben Yes, I can. It's in the edit. (Shamefully lowered head because I always forget that people can't see my screen... Sorry, hehe.) – Konrad Viltersten Feb 10 '14 at 09:27

3 Answers3

13

In the fiddle, the button is not high enough for the text. But that is easily fixed by adding line-height:0 to the CSS.

Updated fiddle.

Note that this does not influence the position of the "X" the same amount in different browsers. Alternative solutions might be to make the font size smaller, using a lowercase "x" or a multiplication sign "×" etc., or a combination.

By the way, you said you tried setting the margin, but that is never a solution. The margin is on the very outside of the button. Padding would work, but you can have only positive paddings, not negative.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
2

My attempt at a solution:

I achieved a good result by overriding the default button border styling with my own styling, increasing the width and height by 1px, and specifying the font-size. I also added <span> tags around the button text to make it easier to style the actual text. (I used <span> and then made it a block element, but <p> or <div> would have worked as well.)

(My biggest question to you is "Why are you not styling the buttons yourself, and relying on ugly default button styles?".)

HTML:

<button><span class="text">X</span></button>

CSS:

button {
    display: block;
    padding: 0px;
    margin: 0;
    width: 19px;
    height: 19px;
    border: 1px solid #000;
    border-radius: 5px;
}

button span.text {
    font-size: 11px;
    padding: 2px;
}

JSFiddle Example.

HarleyCreative
  • 303
  • 2
  • 8
  • Good question... Next question, please? :) Simply because I hoped that I didn't have to. Never needed it before. On the other hand, I never had buttons with "X" on. Good point at any measure, though. – Konrad Viltersten Feb 10 '14 at 12:46
0

Make a span tag inside button tag and then you can use any property`

HTML:

  <button type="button"><span class="buttonText">X</span></button>

CSS:

button{
height: 20px;
width: 20px;
}
.buttonText{
  color: blue,
  padding: 10px;
}
Manish Kumar Srivastava
  • 21
  • 2