html - 为什么 css 输入文本字段需要指定高度才能正确呈现

Question

我有一个带有类样式的文本输入:

.my_input{
  padding:10px;
  font-size:16px;
  line-height:16px;
  border:0;
}

您可能希望上面的代码呈现高度为 36px 的输入字段，但它呈现的文本框为 38px 高。如果我将高度设置为它可以工作的属性，但是我想知道为什么它需要设置高度属性才能准确呈现它。

请参阅我的 codepen 示例: https://codepen.io/jonniejoejonson/pen/Ewmyad

谢谢，J

Answer 1

您的 Codepen 示例默认为 Arial 字体。如果您在开发工具 (Chrome) 中查看，您会看到文本框的内部尺寸为 195x18，顶部和底部填充为 10 像素，这就是解释的 38 像素高度。

现在将 .my_input 类设置为使用 font-family: Tahoma;，现在内部尺寸为 191x19。

为什么？您的浏览器正在根据元素上设置或继承的字体大小计算一个合理的值。

出色的深度潜水，https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align .

这里有一个关键要点:

The Arial font describes an em-square of 2048 units, an ascender of 1854, a descender of 434 and a line gap of 67. It means that font-size: 100px gives a content-area of 112px (1117 units) and a line-height: normal of 115px (1150 units or 1.15). All these metrics are font-specific, and set by the font designer.

注意 1.15 值。如果我们计算 (font size) 16px x 1.15，结果是 18.4。在 Internet Explorer 上，TextBox 元素的高度为 18.4px(Chrome 仅显示 18px，这是浏览器对此进行不同处理的示例)。

改变的不是字体大小，而是元素的行高。

总结 line-height 取决于font-family、font-size 和您的浏览器。出于这个原因，height 是更合适的属性来保证您在这种情况下期望的结果。