iPhone <button> padding unchangeable?

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?

Solution 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>

Solution 2

As long as you don't need the native control button look, and are OK doing your own style in CSS, just add -webkit-appearance: none, and you should get full control over the element.

You could also try -webkit-appearance: button or -webkit-appearance: pushbutton to try to get the default styling, too.

You can see some of these at work here.

Solution 3

I've overcome this problem by wrapping <button> contents in a <div> like so...

<button><div>Submit</div></button>

or by using jQuery and adding the following to a script...

$('button').wrapInner('<div/>')

...and including the following styles to the page

button { padding: 0; }
button > div { margin: 0 -1em; padding: 0.4em 0.8em; }

Note that you can change the inner div's padding to suit your needs. Also note that this will only work with <button> elements and not <input type="button"> or related elements as they cannot contain child elements.

Comments

[bushytop]

Very clever solution that should have worked. But I tried that already – no dice.

[bushytop]

A negative margin works? OK. I hoped it didn't have to come to that, but it works, I guess. Thanks.

[Joshua]

This seems to be a bug in iPad browser as of OS version 4.1. Sad :(

[Marin]

This bug has been fixed with iOS 4.2, available on XCODE 3.2.5

[peg101]

You sir, are a genius! I'm using em's, without the span. Setting width big enough to include the extra padding sorted it, I now have my perfectly round centered button.

[Jethro Larson]

IOS 5 fixes this bug so this hack actually breaks iPhone 4's buttons... So how do we unhack IOS 5?