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?

Degradation

Have you tried specifying a CSS padding and if that alone doesn't work, a border property for the button to turn off native GUI rendering? – Sonstrom

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>

Showpiece

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. – Champignon

Answer 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.

Chiton

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

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

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

Answer 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.

Instant

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

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

Answer 4

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.

Shala

Answer 5

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;

Regardant

Answer 6

Change the padding on the inside button node. The node can simply be the plain text within.

button {
  padding: 0px;
}

button > * {
  padding: 4px;
}

Ernie

Answer 7

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

box-sizing: conter-box;

Barca