Почему отображение: блокировать не растягивающие кнопки или элементы ввода

Я пытаюсь понять причину этой проблемы:

Какая основная причина элементов <button> или <input> не ведет себя как другие элементы при установке на display:block!

Я не ищу обходные пути, чтобы исправить эту проблему, поэтому, пожалуйста, не указывайте мне этот ответ, потому что он не отвечает на вопрос.

Здесь js-скрипт, который иллюстрирует проблему

Обновление 1: @Pete правильно, атрибут размера по умолчанию для элемента - это то, что задает размер даже на блоке, так как вы можете в этой скрипте атрибут size и cols <input> и <textarea> изменяет их ширину. Это решает часть моего вопроса.

Учитывая это, теперь мой вопрос: почему элемент <button> не ведет себя как другие элементы блока? Это для меня тайна!

Ответ 1

Я думаю, что значение по умолчанию присваивается атрибуту размера входов, что означает, что если вы его не переопределите, ваша ширина не будет на 100%

Если вы посмотрите на спецификацию firefox и прокрутите вниз до раздела о размере, вы увидите, что они имеют значение по умолчанию 20

Я не уверен в свойствах кнопки, которые вызывают не 100% -ную ширину при изменении блока

Ответ 2

Некоторые элементы, такие как <input>, <textarea> или <button>, имеют стандартные стили, такие как их граница или, в вашем примере, их размер. Я думаю, причина в том, что HTML по-прежнему можно использовать с простейшей разметкой и не требует никакого моделирования из css (или встроенных атрибутов) для работы.

Тот факт, что display: block не изменяет это поведение, заключается в том, что поле ввода уже является блочным элементом. Но в отличие от большинства других элементов он имеет значение по умолчанию для атрибута width, который не является 0.

Причина, по которой я думаю, довольно проста: если вы создаете поле <input> и не используете css или стиль, вы просто не увидите его, например, вы не видите незанятый <div>.