Padding inside a button element not removable

Question

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>

Answer 1

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.

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