爲什麼CSS width屬性正在與輸入元素

Question

根據CSS docs：

寬度CSS屬性...適用於所有元素，但非替換行內元素，表格行和行組

輸入是內聯元素。那麼爲什麼寬度屬性是與輸入元素？

Answer 1

例外是non-replaced inline elements。輸入是被替換的元素。

代替元件

在CSS中，一個替代元素是一個元素，其表示是 CSS的範圍之外。這些是外部對象，它們的表示獨立於CSS。典型的替換元素 是<img>,<object>,<video>或表格元素如<textarea>和 <input>。僅在特定情況下，某些元素（如<audio>或<canvas>）被替換爲元素 。使用CSS內容 屬性插入的對象是匿名替換元素。

CSS在某些情況下特別處理替換元素，例如 計算邊距和一些自動值。

請注意，某些替換的元素（但不是全部）具有固有的 尺寸或定義的基準，某些CSS屬性 （如vertical-align）使用該基準。

參考：MDN - Replaced element