仅包含input元素的div高度为何表现异常？

核心原因 #

1. 行高继承问题：div会继承body的默认line-height（通常是normal，对应字体大小的1.2~1.5倍）。当你给div设置font-size:12px时，计算后的行高约为15.3px，这直接决定了div的高度——块级元素的高度由内部行框高度决定。
2. input是替换元素：input属于浏览器渲染的替换元素，自带默认垂直内边距（即使去掉边框），它的高度由字体大小+内边距共同计算（比如12px字体+上下各1px内边距，总高度14px），且内部行高紧密贴合内容，和div的行高逻辑完全不同。

解决方法 #

方法1：让div的行高匹配input的高度

直接给div设置与input高度一致的line-height，强制行框高度等于input高度：

<div style="box-sizing: border-box; background-color: white; font-size:12px; line-height:14px">
  <input style="vertical-align: middle; border: none; background-color: green; font-size:12px" placeholder="Hello" />
</div>

方法2：用Flexbox布局消除行高影响

将div设置为display:flex，它会自动收缩包裹input，且内部元素对齐不受行高干扰，是更可靠的像素级布局方案：

<div style="box-sizing: border-box; background-color: white; display:flex; font-size:12px">
  <input style="border: none; background-color: green; font-size:12px" placeholder="Hello" />
</div>

方法3：显式统一所有盒模型属性

如果需要极致控制，可以给div和input都明确设置高度、内边距、行高，确保完全一致：

<div style="box-sizing: border-box; background-color: white; font-size:12px; height:14px; padding:0; margin:0; line-height:14px">
  <input style="vertical-align: middle; border: none; background-color: green; font-size:12px; height:14px; padding:0 4px; box-sizing:border-box" placeholder="Hello" />
</div>

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