Question

我们说我有一个输入字段，我将其height:25px。如果我增加该文本字段内的字体大小，虽然框大小是常量，但它显示为我添加了大量填充。当字体大小正常时，它看起来像这样：

BEFORE

但是现在当我增加字体的大小时，它看起来像额外的填充添加了这样的东西：

AFTER

但是，调试时填充没有变化。我尝试添加box-sizing：border-box，但它仍然保持不变。如果有人可以帮助我，我真的很感激。感谢。

只需更改字体大小即可实现简单演示。

<body>
  <div>
    <input type="text" value="HI"/>
    <input type="text" value="HELLO" style="font-size: 900px; height: 30px; width: 100%;"/>
    <input type="text" value="HI"/>
  </div>
</body>

Answer 1

您可以重置vertical-align属性。

Defaut为baseline，line- height如果未重置则等于font-size。

示例vertical-align：（添加了文字并减少了一些有趣的例子;）

＆＃13;

input {
  vertical-align:middle;
  }

/* see div middle center. Notice: the tallest input gives the line-height on the line it stands */
div {
  background:linear-gradient(to top,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0.1) 50%) ,linear-gradient(to left,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0.1) 50%);

＆＃13;

<div>
    <input type="text" value="HI"/> text
    <input type="text" value="HELLO" style="font-size: 90px; height: 30px; width:50px;"/> text
    <input type="text" value="HI"/>
  </div>

＆＃13;

增加文本大小但保持输入字段的位置不变

1 个答案: