Question

A HTML5 <button> in Mobile Safari seems to have fixed, unchangeable left and right padding. Here’s a demo plus how it looks in Safari 5 and iOS4.

How can I get rid of that padding?

Answer 1

I just figured out that the “additional padding” is always 1em. In case you use an absolute number for your font-size, you can set the button’s font-size to 0 and reset it for the inner element:

button{
   font-size:0;
}
button span{
   font-size:14px;
}

<button><span>Submit</span></button>