Если этот вопрос задан, я извиняюсь, но я не мог найти тот же самый вопрос. Как говорит W3schools, свойство height не включает прописку, границы или поля! (ссылка). Итак, вот простая декларация стиля:
input {
width:180px;
height:18px;
padding:7px;
border:1px solid black;
}
и здесь html:
<input type='text' name='text' value='194px by 32px' /><br />
<input type='submit' name='button' id='button' value='180px by 18px' />
Текстовое поле равно 194px на 32px, как и ожидалось, но кнопка отправки - 180px на 18px. Очевидно, что я могу просто увеличить высоту и ширину кнопки вдвое больше, но я хочу понять, почему существует расхождение. Здесь я сделал jsfiddle: http://jsfiddle.net/RRf5A/. Спасибо за вашу помощь. FYI, я уже пробовал <button> вместо ввода submit и display:inline-block.
Вы можете обойти это, добавив box-sizing: content-box; для ввода элементов типа submit. Вместо того, чтобы подробно разбираться в себе, я просто отправлю вас в http://www.quirksmode.org/css/box.html. Тем не менее, он в настоящее время не поддерживается по всем направлениям, поэтому вам может показаться лучше для совместимости между браузерами, чтобы специально объявлять разные высоты и прокладки для кнопок отправки.