html lineheight div,html – Chrome上的文本输入：line-height似乎有最小值

我想我做到了！

在我的测试中，似乎line-height必须至少约115％的字体大小，所以如果你想50px高元素你必须有〜43px的东西，所有排队：

图1.字体大小为50px线宽的86％。事情排列，但不遵守OP要求的50px字体大小。

input, span {

border: 2px solid red;

display: inline-block;

font: 43px Arial;

line-height: 50px;

padding: 0;

vertical-align: middle;

width: 100px;

outline-style:none;

box-shadow:none;

overflow:hidden;

/* optional - to include the borders in the element size:

box-sizing:border-box;

*/

}

Text

如果你将字体大小增加到所需的50px，那么输入框尊重的最小行高为〜58px。任何尝试用垂直对齐来抵消这种影响在输入中没有影响，但是我们可以修正元素高度并隐藏溢出，以给出一致的(虽然不完全可信的)外观：

图2. 50px文本强制的行高58px，它被截断与溢出隐藏。

input, span {

border: 2px solid red;

display: inline-block;

font: 50px Arial;

line-height: 58px;

padding: 0;

height:50px;

vertical-align: top;

width: 100px;

outline-style:none;

box-shadow:none;

overflow:hidden;

/* optional - to include the borders in the element size:

box-sizing:border-box;

*/

}

Text

关闭，但没有雪茄。但是这让我想到 – 也许一个伪元素可能不那么限制？我发现，你可以风格的输入::第一行伪甚至在一个输入，这将尊重高度，字体大小，行高和垂直对齐！

因此voilà！

图3.第一行伪元素的胜利！

input, span {

border: 2px solid red;

display: inline-block;

font: 50px Arial;

line-height: 50px;

height: 50px;

padding: 0;

vertical-align: middle;

width: 100px;

outline-style:none;

box-shadow:none;

overflow:hidden;

/* optional - to include the borders in the element size:

box-sizing:border-box;

*/

}

input::first-line, span::first-line {

vertical-align: middle;

}

/* weirdly the placeholder goes black so we have to recolour the first-line */

input::-webkit-input-placeholder::first-line {

color:grey;

}

Text

这里有一个jsFiddle的很多，所以你可以看到我的工作。 😉