HTML的inline类型input标签为什么会响应width和height属性设置？

为什么此处两个input标签均生效了我在CSS文件中定义的width和height值？作为inline元素，二者本应该忽略这两个属性才对。

相关代码：

<input class="submit" type="submit" value="Send">
<input class="reset" type="reset" value="Clear">

input
{
    width: 200px;
    height: 40px;
    background-color: lightgreen;
}

解答 #

你对inline元素宽高不生效的认知仅适用于非替换内联元素，<input>属于替换内联元素（replaced inline element），本身支持width、height属性设置。

• 替换内联元素的渲染内容不直接写在HTML文档里，需要浏览器根据元素标签、属性加载对应内容完成渲染，这类元素自带固有尺寸，CSS规范明确规定替换元素的盒模型计算逻辑和块级元素类似，支持直接设置宽高。
• 常见的替换内联元素还包括<img>、<video>、<select>、<textarea>等，日常给图片设置宽高可以生效，和本次input设置宽高生效是同一个逻辑。
• 只有<span>、<a>这类内容直接嵌入HTML的非替换内联元素，设置宽高才会被忽略，它们的尺寸完全由内部内容撑开。

内容的提问来源于stack exchange，提问作者Denys_newbie