Подтвердить что ты не робот

Добавление CSS к высоте/ширине для <input type='submit'>

Если этот вопрос задан, я извиняюсь, но я не мог найти тот же самый вопрос. Как говорит 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.

4b9b3361

Ответ 1

Вы можете обойти это, добавив box-sizing: content-box; для ввода элементов типа submit. Вместо того, чтобы подробно разбираться в себе, я просто отправлю вас в http://www.quirksmode.org/css/box.html. Тем не менее, он в настоящее время не поддерживается по всем направлениям, поэтому вам может показаться лучше для совместимости между браузерами, чтобы специально объявлять разные высоты и прокладки для кнопок отправки.