Html：设置font-size等于输入高度

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> ：

执行此操作

height

因此span的{​​{1}}已更改为113px，line-height变为142px。为什么？这是否意味着font-size: 100px实际上不是100px。它是如何工作的？

Answer 1

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

css_display_visibility

span具有默认的内联值，您可以将显示更改为内联块。

内联元素：

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

祝你好运