Я пытаюсь понять причину этой проблемы:
Какая основная причина элементов <button> или <input> не ведет себя как другие элементы при установке на display:block!
Я не ищу обходные пути, чтобы исправить эту проблему, поэтому, пожалуйста, не указывайте мне этот ответ, потому что он не отвечает на вопрос.
Здесь js-скрипт, который иллюстрирует проблему
Обновление 1: @Pete правильно, атрибут размера по умолчанию для элемента - это то, что задает размер даже на блоке, так как вы можете в этой скрипте атрибут size и cols <input> и <textarea> изменяет их ширину. Это решает часть моего вопроса.
Учитывая это, теперь мой вопрос: почему элемент <button> не ведет себя как другие элементы блока? Это для меня тайна!
Я думаю, что значение по умолчанию присваивается атрибуту размера входов, что означает, что если вы его не переопределите, ваша ширина не будет на 100%
Если вы посмотрите на спецификацию firefox и прокрутите вниз до раздела о размере, вы увидите, что они имеют значение по умолчанию 20
Я не уверен в свойствах кнопки, которые вызывают не 100% -ную ширину при изменении блока
Некоторые элементы, такие как <input>, <textarea> или <button>, имеют стандартные стили, такие как их граница или, в вашем примере, их размер. Я думаю, причина в том, что HTML по-прежнему можно использовать с простейшей разметкой и не требует никакого моделирования из css (или встроенных атрибутов) для работы.
Тот факт, что display: block не изменяет это поведение, заключается в том, что поле ввода уже является блочным элементом. Но в отличие от большинства других элементов он имеет значение по умолчанию для атрибута width, который не является 0.
Причина, по которой я думаю, довольно проста: если вы создаете поле <input> и не используете css или стиль, вы просто не увидите его, например, вы не видите незанятый <div>.