垂直对齐输入内的字符

Question

如何在不改变输入高度的情况下垂直对齐输入中的字符/文本(它必须精确到28px)？输入有这个CSS,所以我不明白为什么它有一些padding-top(？):

input {
    font-family: arial;
    font-size: 28px;
    line-height: 28px;
    height: 28px;
    padding: 0;  
    border: none;
    outline: none;
    background-color:#cdcdcd;
}

<input value="asdg">

一些字母如g,p和q被切断了

删除边距底部没有帮助.

https://jsfiddle.net/4rtL6415/

Answer 1

没有填充顶部,它是关于字体大小.我已经使用适合整个高度的特殊字符更改了您的代码段输入(我将在下面解释):

input {
    font-family: arial;
    font-size: 28px;
    line-height: 28px;
    height: 28px;
    padding: 0;  
    border: none;
    outline: none;
    background-color:#cdcdcd;
}

<input value="?gs">

这个图片:

解释如何构造字体.99%的时间你会看到Body<的字符,EM这就是为什么我们可能认为有一种填充顶部.

有时候,你会跨越Body==的字符,这EM是?(和很多其他人)的情况.

你所看到的不是一个bug而是一个功能.从这里您有3个选择:

1. 改变字体大小;
2. 改变输入高度;
3. 更改不会"溢出"的字体系列.

选择权归你所有.