Vertical alignment of characters inside the input

Question

How to vertically align characters / text inside input without changing input height (it should be exactly 28px)? The input has this CSS, so I don't understand why it has 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">

Run codeHide result

Some letters, such as g, p, and q, are truncated.

Removing the bottom border does not help.

https://jsfiddle.net/4rtL6415/

Answer 1

Problem

descenders, g, p, q y, "" , font-size. , line-height descenders. , height, , line-height, , overflow ( ).

, , , line-height. (vertical-align, , , inline .) CSS, ...

1 ( Webkit)

, , , clip-path, 28px. , , , , , clip-path Webkit (Chrome, Safari, Opera).

input {
  display: inline-block;
  padding: 0;
  border: none;
  height: 32px;
  font-size: 28px;
  line-height: 32px;
  font-family: arial;
  background: #cdcdcd;
  vertical-align: baseline;
  -webkit-clip-path: inset(4px 0px 0px 0px);
  clip-path: inset(4px 0px 0px 0px);
}

input: <input value="asdg">

Hide result

2

DebRaj, inline-block block ( , ). , , , clip-path, , overflow: hidden;. , , , clip-path .

.text {
  display: inline-block;
  vertical-align: baseline;
  overflow: hidden;
  margin: 7px 0 -7px 0;
  height: 28px;
}
.text > input {
  margin-top: -4px;
  border: none;
  padding: 0;
  background: #cdcdcd;
  font-size: 28px;
  line-height: 32px;
  font-family: arial;
}

input:<span class="text"><input value="asdg"></span>

Hide result

3

line-height, . line-height - , font-size, . , , . , , : line-height , , height. . contenteditable.

.fauxTextInput {
  display: inline-block;
  vertical-align: baseline;
  margin: 6px 0 -6px 0;
  padding: 0 3px 0 3px;
  width: 9em;
  height: 28px;
  overflow: hidden;
  font-size: 28px;
  line-height: 23px;
  font-family: arial;
  background: #cdcdcd;
}

Faux input: <span class="fauxTextInput" contenteditable>asdg</span>

Hide result

Answer 2

, . char, ( ):

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

<input value="ￂgs">

Hide result

---

:

, . 99% Body < EM, , padding-top.

, Body == EM, ￂ ( ).

, , - , . 3 :

• ;
• ;
• , .

- .

Answer 3

@Thomas, . , , , input div , , .

:

<div class="input-wrapper">
  <input value="asdg">
</div>

CSS

.input-wrapper{
  position: relative;
  font-family: arial;
  width: 100%;
  height: 90%;
  padding: 0;
  background-color: #fff;
  overflow: hidden;
}
.input-wrapper input {
    display: block;
    width: 100%;
    height: 124%;
    margin-top: -0.19em;
    margin-bottom: 0em;
    font-size: 28px;
    padding: 0;
    outline-offset: 0;
    border: none;
}
.input-wrapper input:focus{
   outline-offset: 0;
   outline: 0;
   border: none;
   box-shadow: none;
}

: https://jsfiddle.net/x8jmLp8m/12/

, .

Answer 4

. , .

, span contenteditable. , , 28 .

CSS :

span{
  display: inline-block;
  font-size: 25px; /*higher than 25px simply doesn't fit a 28px container*/
  line-height: 1;
  padding: calc(-.5em + 14px) 0;
}

• display, ,
• font-size,
• line-height 1, , 25 .
• a padding of calc(-.5em + 14px) 0.

- , 28 , . . , , . * 2 28.

font-size | calculation          | output |
--------------------------------------
50px      | calc(  -25px + 14px) |  -11px | a negative padding translates to a padding of 0
25px      | calc(-12.5px + 14px) |  1.5px |
20px      | calc(  -10px + 14px) |    4px |
15px      | calc( -7.5px + 14px) |  6.5px |
10px      | calc(   -5px + 14px) |    9px |

, 14px calc, ,

,

Answer 5

, , . height, line-height , , .

, .

Answer 6

:

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

<input value="asdg">

Hide result

Answer 7

, , .

CSS , - ( ).

css -

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

}

, - decent . , , .

Answer 8

  input {

  height:34px;

    }

Answer 9

40 . https://jsfiddle.net/525raf3L/

input {
    font-family: arial;
    font-size: 28px;
    line-height: 40px;
    height: 40px;
    padding: 0 12px;  
    border: none;
    outline: none;
    background: yellow;
}

<input value="asdg">

Hide result