<button> проблема заполнения / ширины

Question

Я использую <button>, чтобы отправить запрос в форме.Я также стилизовал a.button точно так же, как <button> (мне нужен a.button для создания JS).

У кнопки есть некоторые отступы, фиксированная высота.Когда я указываю ширину кнопки / a, они выглядят одинаково.Но когда я добавляю ширину к <button>, он игнорирует заполнение.

У меня такая проблема в Chrome, Firefox и Opera, поэтому я думаю, что это не ошибка рендеринга.Также та же проблема с <input type="submit" />

Вот основной 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;
}

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/

Любые предложения, почему браузеры игнорируют отступы?(сверху и снизу при использовании высоты / слева и справа при использовании ширины).

Answer 1

Очень странно, я видел, что мой Chrome имеет правило box-sizing: border-box; для элементов ввода, поэтому отступы включены в ширину ...

Поэтому, чтобы избежать этого, просто укажите box-sizing: content-box; (какой-то префикс можетбыть необходимым).

Answer 2

Мне кажется, что это может быть проблема с конфликтом таблиц стилей.Попробуйте использовать! Важный, чтобы переопределить, что бы это ни было, и это может решить вашу проблему.

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

Надеюсь, это поможет.

Майкл.