Почему «дисплей: блок» и «ширина: авто» не растягивают кнопку, чтобы заполнить контейнер?

Question

Когда я установил display: block; и width: auto; на кнопку, я бы ожидал, что кнопка растянется, чтобы заполнить контейнер, как это делают другие элементы блока. По какой-то причине это не так, по крайней мере, не в последнем Chrome.

Когда я искал поисковый запрос, я нашел много людей, задающих один и тот же вопрос, которые остались довольны ответом на вопрос «Как растянуть мои кнопки, чтобы заполнить контейнер?» То, что не, что меня интересует. (Я отлично могу растянуть свои кнопки, как мне нужно.) Мне также не помогли проверить свойства кнопок, в том числе те, которые были введены по умолчанию браузером.

Хотелось бы понять, что заставляет кнопки игнорировать display: block; width: auto; и оставаться горизонтально по их содержанию.

---

Вот демонстрация того, что я имею в виду:

button { 
 
    display: block; 
 
}

<button style="width: auto;">button with `display:block; width:auto;`</button> 
 
<button style="width: 100%;">button with `display:block; width:100%`</button>

Я бы ожидать, что кнопка с width:auto; растягиваться, а также.

---

Просто чтобы быть абсолютно ясно, что это не является дубликатом на input with display:block is not a block, why not? или любой подобный вопрос, если что не только ответы, описывающий способы растянуть рассматриваемые элементы.

Редактировать: Возможно, это дубликат What is it in the CSS/DOM that prevents an input box with display: block from expanding to the size of its container. С другой стороны, что вопрос не упоминает кнопки вообще. Вам нужно прочитать ответ, чтобы узнать, как это относится и к кнопкам.

Answer 1

Есть несколько элементов (<input>, <select>, <button>, <img>, <object> и <textarea>), которые считаются замененные элементы, внешний вид и размеры определяются внешним ресурсом. (например, операционная система, плагин и т. д.). С HTML5 у вас есть еще пара таких, как <audio> и <canvas> и some more.

Замененные элементы могут иметь внутреннюю размеры ширины и высоты значения, которые определены самим элементом, а не его окружением в документе. Например, если элемент изображения имеет ширину , установленную в auto, будет использоваться ширина файла связанного изображения. Внутренние размеры также определяют внутреннее соотношение, которое используется для . Определение вычисленных размеров элемента должно быть указано только в одном размере . Например, если задана только ширина для элемента изображения, скажем, 100 пикселей, а фактическое изображение составляет 200 пикселей шириной и 100 пикселями в высоту, высота элемента будет масштабироваться на столько же, чтобы 50px.

Элементы замещения могут также иметь требования к визуальному форматированию, налагаемые элементом, за пределами контроля CSS; например, пользовательский интерфейс управления для элементов формы.

(. Shameless копия ответа на этот source and possible dublicate, который извлекли информацию из this article)

Пожалуйста, обратите внимание, что - как вы увидите в дискуссии в комментариях - button не действительно replaced element defined by w3c. Однако он ведет себя как один, который обсуждается далее в this article.