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，顶部和底部填充为10px，这是您的38像素高度解释。

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

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

这里有很好的深度潜水，https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align。

这是一个关键点：

Arial字体描述了一个2048单位的em-square，一个1854的上升，一个下降434和一个67的行差距。这意味着font-size：100px给出的内容区域为112px（1117个单位）和行高：正常115px（1150单位或 1.15 ）。所有这些指标都是特定于字体的，并由字体设计者设置。

请注意1.15值。如果我们计算(font size) 16px x 1.15，则结果为18.4。在Internet Explorer上，TextBox元素的高度为18.4px（Chrome仅显示18px，这是一个以不同方式处理此问题的浏览器示例。

不是要更改的字体大小，只是元素的行高。

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

Answer 2

按this answer中的（粗略）解释， height 是容器的垂直度量， line-height 是从第一行文本顶部到第二行文本顶部的距离。 line-height在文本的上方和下方均分，并且在 inline elements （如<input>）上，指定用于计算线框高度的高度。 / p>

line-height对身高无影响力，如this fiddle所示。

尽管您未明确指定height，但如果没有明确指定 <input> 元素，则会自动为您生成。根据MDN，默认height按以下方式计算：

默认情况下，该属性定义 content area 的高度。由内容边缘限定的内容区域包含元素的“真实”内容，例如文本，图像或视频播放器。其大小是内容宽度（或内容框宽度）和内容高度（或内容框高度）。

这与大多数浏览器的18px大致相关。

您的<input>默认为38px，因为它会继承18px默认高度以及填充的20px。添加自定义height属性会覆盖默认设置，因此您最终得到的<input>元素的height为36px。

希望这有帮助！：）

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

2 个答案: