如何修复input输入框内文字顶部被轻微截断的问题？

问题重现 #

你用以下代码实现输入框时，出现了文字（包括占位符）顶部轻微截断的问题：

HTML代码：

<input type="text" class="textField" placeholder="type here...">

CSS代码：

.textField {
    width: calc(100% - 90px);
    height: 30px;
    background-color: #fff;
    border: none;
    outline: none;
    font-size: 12px;
    font-family: "martian-mono-variable", sans-serif;
    text-indent: 5px;
}

调整padding、box-sizing、字号或输入框高度都无法解决，直到设置line-height: 30px（与输入框高度一致）后问题消失，下面解释具体原因：

问题根源 #

输入框这类表单元素的文本渲染逻辑和普通块元素不同：

• 浏览器默认会让输入框内的文本基于基线对齐，而非垂直居中。
• 你使用的martian-mono-variable是等宽字体，这类字体的字符上升高度（ascent）通常比普通字体更大。
• 当只设置height:30px但未指定line-height时，浏览器会用默认行高（一般是字号的1.2倍左右，12px字号对应的默认行高约14.4px），这个行高远小于输入框高度。文本在30px高的容器里按基线对齐，加上字体本身的上升高度较大，就会导致文字顶部超出输入框可视范围，出现截断。

为什么设置line-height:30px能解决 #

当line-height与输入框height值一致时，浏览器会让单行文本在这个行高范围内垂直居中，文字的整体高度（包括上升和下降部分）被完全限制在line-height对应的空间里，刚好适配输入框的高度，自然就不会出现截断。

更推荐的替代方案 #

其实没必要固定输入框的height，用上下padding来控制输入框高度会更灵活，还能避免字体度量带来的适配问题：

.textField {
    width: calc(100% - 90px);
    padding: 8px 5px; /* 上下padding控制高度，左右保持缩进 */
    background-color: #fff;
    border: none;
    outline: none;
    font-size: 12px;
    font-family: "martian-mono-variable", sans-serif;
}

这种方式通过padding给文本留出足够的上下空间，无需依赖line-height和height的匹配，兼容性更好。

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