Почему input элементу можно задать width и height, если он inline?

Question

[jurako]

Здравствуйте,
Изучаю основы HTML и CSS и столкнулся с непонятной ситуацией.

Насколько я понимаю, элементам со свойством display: inline нельзя задать высоту и ширину.

Но, почему-то, элементу input, который вроде как является по умолчанию inline (следуя из данного списка: https://developer.mozilla.org/en-US/docs/Web/HTML/...) можно задать ширину и высоту (в отличии от другого inline элемента span).

Даже если я задаю явно в CSS свойство display: inline, то всё равно могу указать ширину и высоту:
https://codepen.io/jurako91/pen/wvJLLVK

Почему так?

Answer 1

[Сергей delphinpro]

По умолчанию INPUT имеет свойство

input {
  display: inline-block;
}

Будьте внимательнее.

Comments

[jurako]

Сергей, спасибо за ответ! Вы правы - открыв dev tools в Google Chrome, элементу input user-agent-stylesheet по умолчанию задает display: inline-block; и в таком случае width и height действительно должны работать. Однако, всё ещё не понятно, почему переопределив значение свойства display на inline, свойства width и height продолжают применяться?

[Сергей delphinpro]

jurako, не всё так просто. Есть категория замещаемых элементов. Они могут иметь собственные размеры. Сюда входят video, audio, img, embed, input и еще какие-то.

[jurako]

Сергей delphinpro, спасибо, теперь стало немного понятнее! :) Буду изучать этот вопрос дальше