CSS Высота: 20 пикселей + нижняя обивка: 3 пикселей = 20 пикселей?

Отступы для кнопок (и большинства полей формы) работают по-разному. Отступы включаются в ширину и высоту (кроме случаев, когда ширина является динамической (т. Е. По умолчанию для кнопок), тогда отступы добавляются к ширине).

Я только что протестировал это в Firefox, IE, Chrome и Opera, и он одинаков во всех.

Единственное отличие состоит в том, что Opera немного по-другому реагирует, когда высота становится слишком маленькой для текста, то есть центрирует его по вертикали вместо того, чтобы размещать его ниже верхнего отступа.

Использовать поле вместо заполнения. Заполнение устанавливается внутри поля содержимого элемента расширяется

Это не проблема, это нормальное поведение компонентов ввода

PPK сообщает, что это ошибка. Кажется, Chrome никак не реагирует, когда я объявляю padding-bottom на кнопку, так что ... я не знаю. Я полагаю, что наиболее важным является то, что вы можете обойти эту проблему в Firefox и Opera (по крайней мере), используя:

input[type=submit] {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

<input type="submit"> оформлен как -moz-box-sizing: border-box в таблице стилей UA в Gecko для совместимости веб-сайтов. Если вам нужно поведение, отличное от заданного по умолчанию, соответствующим образом отрегулируйте стили размера коробки.