Padding inside a button element not removable
button, css, html
Solution
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.
Problem
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> ```