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?

Answer 1

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.

Answer 2

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.

Answer 3

After messing around with the buttons for a week I dumped them and now I use div-s instead. If you add display: inline-block; to the div-button it can also be centered like a button.