设置Input字体为13px但内容高度为16px，求技术解析

核心原因：input是浏览器原生替换元素，渲染逻辑不同于普通文本元素 #

• 替换元素的特殊渲染规则：input属于替换元素，浏览器对这类原生表单控件有内置的样式和渲染机制，不会完全遵循普通行内/块级元素的line-height和font-size计算逻辑。即使你设置了line-height:1，浏览器依然会为内容区域预留足够空间来适配字体的完整字形（包括字体的上伸部、下伸部），或者直接应用了内置的最小高度规则。

• 字体度量的影响：字体的实际显示高度并不完全等于font-size值。比如某些字体的上伸部分和下伸部分总和会超过font-size，浏览器为了完整显示文字，会自动调整内容盒高度。即使你指定了font-size:13px，浏览器可能基于字体的度量信息，将内容盒高度调整为16px以容纳全部字形。

• 浏览器内置样式的干扰：多数现代浏览器会给input设置默认的样式属性，比如Chrome中input的默认样式包含height: auto，但实际计算时会结合字体属性生成合适的内容高度，这个高度可能大于你设置的font-size。你可以在开发者工具的「用户代理样式表」中查看浏览器给input添加的默认规则，就能发现这类内置样式的影响。

验证方法 #

在开发者工具中禁用浏览器的用户代理样式表，或者显式设置input { box-sizing: content-box; height: 13px; }，你会看到内容盒高度变为13px，但此时文字可能会被裁剪——这也侧面说明浏览器默认的16px高度是为了保证文字完整显示。

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