iPhone <button> padding unchangeable?

Question

A HTML5 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.

<

Answer 1

I've overcome this problem by wrapping contents in a

like so...

Submit

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

$('button').wrapInner('
')

...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 elements and not or related elements as they cannot contain child elements.