为何<input>与<button>不继承CSS样式？求底层规则原因

我发现<input>和<button>不继承CSS样式是个很常见的问题，网上能找到的解决方案大致分三类：

• 添加inherit属性：button {font-size: inherit}
• 设置全局通配样式：* {font-size: 2em}（但em会受继承缩放影响，换成rem才靠谱）
• 显式指定目标元素样式：body, button, input {font-size: 2em}

但这些方法都有点取巧，不符合CSS最佳实践。我想从CSS继承规则的底层逻辑出发，搞懂这个“例外”的本质。

之前我从没遇到过这个问题，毕竟一直没需求让这两个元素继承字号，直到学习WebDevSimplified的免费React Hook课程里的useImperativeHandle章节时才碰到。我一开始以为是因为<input>是空元素，但<button>并不是空元素，所以这个猜测不成立。

我当然可以手动给这两个元素设置样式，但想搞清楚：它们默认不继承CSS样式的根本原因是什么？我已经查过谷歌、MDN、StackOverflow，希望得到规则层面的明确解释。

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