I’m using <button> to make a post request in a form. I also styled

Question

0

Asked: May 23, 20262026-05-23T21:35:35+00:00 2026-05-23T21:35:35+00:00

I’m using <button> to make a post request in a form. I also styled

0

I’m using <button> to make a post request in a form. I also styled a a.button exactly like the <button> (I need the a.button to make some JS stuff).

The button has some padding, a fixed height. When I do specify the width of the button / a they both look the same. But when I add width to the <button> it ignores the padding.

I’m having this problem in Chrome, Firefox and Opera, so I guess it’s not a rendering fault. Also same issue with <input type="submit" />

Here is the basic CSS:

.button, button {
    margin: 0;
    display: inline-block;
    border: 0;
    text-decoration: none;
    cursor: pointer;
    color: black;
    background: #ddd;
    font: 12px Verdana;
    padding: 40px; /* 40px, so you can see that it won't be rendered with width */
    text-align: center;
}

The HTML:

<a href="#" class="button">Some text</a>
<button>Some text</button>
<!-- Works fine till here -->
<br /><br />
<a href="#" class="button" style="width:200px">Some text</a>
<button style="width:200px">Some text</button>

Fiddle: http://jsfiddle.net/9dtnz/

Any suggestions why the browsers are ignoring the padding? (top and bottom when using height / left and right when using width).