Html：设置字体大小等于输入高度

Question

我需要将font-size 调整到input 的高度。 Input 看起来像这样：

<input type="text" id="inputt" name="test" value="ddpp" style="height:100px; width:200px; font-size:100px; line-height:100px; font-family: 'Times New Roman'">

如您所见，height、font-size 和 line-height 属性等于 100px。当我alert() 这些属性由jquery 在页面加载后所有values 等于100px。但是input 中的文本不适合input height。 我也尝试使用span：

<span id="spann1" style="height:100px;font-size: 100px;border: 1px solid red;font-family: 'Times New Roman'">ddpp</span>

因此，span 的 height 已更改为 113px，line-height 变为 142px。为什么？这是否意味着font-size: 100px 在现实中不是100px。那么它是如何工作的呢？

Answer 1

您可以更改显示属性。 display 属性指定是否/如何显示元素。 每个 HTML 元素都有一个默认显示值，具体取决于它是什么类型的元素。大多数元素的默认显示值是块或内联。

css_display_visibility

span 有默认的 inline 值，你可以将 display 改为 inline-block 。

内联元素：

respect left & right margins and padding, but not top & bottom
cannot have a width and height set
allow other elements to sit to their left and right.

行内块元素：

allow other elements to sit to their left and right
respect top & bottom margins and padding
respect height and width

CSS display: inline vs inline-block

祝你好运