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

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.

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;

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;
}

Answer 7

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

box-sizing: conter-box;