為什麼按鈕不展開以用“display: block”和“width: auto”填充其容器？

為什麼「display: block」和「width: auto」不展開一個按鈕來填滿容器？

在 HTML 中，某些元素，例如按鈕、輸入、選擇和圖像，被指定為「替換元素」。這些元素具有由外部資源（例如操​​作系統或插件）決定的固有尺寸和外觀。

當您將「display: block」套用到按鈕時，表示該按鈕的行為應類似於區塊級元素並佔據其容器的整個寬度。但是，「width: auto」指定應使用按鈕的固有寬度。

替換的元素具有固有尺寸，這意味著它們的寬度和高度是固定的，不能透過 CSS 修改。例如，圖像元素的固有尺寸由圖像檔案的大小決定。當「width: auto」套用於取代元素時，瀏覽器會尊重其固有寬度。

此外，替換元素可能具有由瀏覽器或作業系統強加的視覺格式要求，這些要求會覆蓋 CSS 樣式。例如，按鈕具有內建的使用者介面控件，無法僅透過 CSS 進行修改。

就按鈕而言，雖然 W3C 沒有正式將其定義為替換元素，但它表現出類似的行為。因此，應用「display: block; width: auto;」到按鈕不會拉伸它以填充容器，因為其固有寬度受到按鈕的視覺格式要求的限制。

以上是為什麼按鈕不展開以用“display: block”和“width: auto”填充其容器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！