Почему «display:block» и «width: auto» не растягивают кнопку для заполнения контейнера?

При использовании «display:block» и « width: auto» на кнопке, можно ожидать, что она растянется и заполнит свой контейнер. Однако это не всегда так. В частности, в этом отношении кнопки в современных браузерах ведут себя иначе, чем другие блочные элементы.

Причина такого поведения кроется в природе кнопок как заменяемых элементов. Заменяемые элементы — это те элементы, внешний вид и размеры которых в первую очередь определяются не CSS, а внешними факторами, такими как операционная система или другие внешние ресурсы. В случае кнопок их размер и стиль часто определяются соглашениями пользовательского интерфейса, специфичными для платформы.

Внутренние размеры

Заменяемые элементы имеют внутренние размеры, то есть их ширина и высота определяются самим элементом, а не окружающим его содержимым. Когда «width: auto» применяется к заменяемому элементу, используется внутренняя ширина элемента. Для кнопок эта внутренняя ширина обычно соответствует размеру элемента управления «Кнопка» по умолчанию, определенному операционной системой.

Требования к визуальному форматированию

В дополнение к внутренним размерам заменено к элементам также могут предъявляться требования к визуальному форматированию. Для кнопок эти требования включают отображение заголовка, границы кнопки и других элементов пользовательского интерфейса. Эти требования к форматированию переопределяют эффекты свойств CSS, таких как «width: auto» и «display: block».

Заключение

Поведение кнопок в отношении « display:block» и «width:auto» являются следствием их статуса замененных элементов. Их внутренние размеры и требования к визуальному форматированию имеют приоритет над свойствами CSS, что приводит к наблюдаемому поведению, когда кнопки не всегда растягиваются, чтобы заполнить свои контейнеры.