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

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.

Answer 2

That's the bug|feature of all webkit browsers. Try adding

box-sizing: conter-box;

Answer 3

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 4

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>

Answer 5

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 6

The "cleanest" solution I've found requires no extra elements but assumes some fixed sizing on your part. Nod to thomp for the negative margin idea. This is similar. This will counter the extra padding:

text-indent:-6px;