Почему элемент кнопки не принимает полную ширину контейнера, например, span?

Question

Только что заметили эту проблему сейчас, если у меня есть элемент span, я могу сделать его полной шириной родительского контейнера, если применим стиль display: block, но я заметил, что то же самое не происходит, когда элемент является button. Вопрос в том, почему? Почему кнопка ведет себя по-другому (по умолчанию это элемент блока, если я правильно помню)

Я исправил его, применив width:100% к кнопке, но не совсем уверен, почему он ведет себя по-другому.

Fiddle для тестирования: https://jsfiddle.net/9k3pjy9e/1/

Answer 1

Кнопка. = inline-block «По умолчанию размер кнопки определяется его текстовым содержанием (так широко, как его содержание) Используйте свойство ширины для изменения ширины кнопки. "

More info here

Span: = inline встроенный элемент не начинается с новой строки и занимает лишь столько, сколько необходимо ширину.

установить его на display: block; тогда:

элемент блока: Элемент уровня блока всегда начинается с новой строки и занимает всю доступную ширину (растягивается влево и вправо, насколько это возможно).

Так что, когда это работает с элементом span, для button элемент width должен быть установлен.