Rimuovi il riempimento superiore e inferiore nell'input di testo in Chrome/Firefox

Question

Sto cercando di rendere un input simile al testo normale. L'obiettivo è disegnare una span, quando l'utente fa clic sull'intervallo che nasconde e visualizza un input che sembra testo semplice, ma modificabile dall'utente.

In Chrome e Firefox non può sbarazzarsi di superiore e inferiore imbottiture, anche se ho impostato le proprietà padding e CSS margine a 0.

mio CSS simile a questa:

input.myInput { 
    font-family: "segoe ui"; 
    font-size: 20px; 
    padding: 0px; 
    margin: 0px; 
    outline: none; 
    border: 0px; 
    vertical-align: baseline; 
} 

vedere che tipo di carattere la dimensione è impostata su 20px. Chrome e Firefox aggiungono 4px padding-top e padding-bottom, in modo che l'input sia alto 28px, non 20px come previsto.

Answer 1

È necessario reimpostare lo line-height dell'elemento di input su 20px. Per impostazione predefinita, alcuni browser aggiungono 4px (2 in alto + 2 in basso) per inserire l'altezza della linea dell'elemento.

Answer 2

Potrebbe essere il tuo carattere. Prova a impostare direttamente l'altezza CSS dell'ingresso o prova a regolare l'altezza della linea.

Answer 3

Come suggerito da Diode, è sufficiente aggiungere altezza al proprio input.

input.myInput { 
    font-family: "segoe ui"; 
    font-size: 20px; 
    height: 20px; 
    padding: 0px; 
    margin: 0px; 
    outline: none; 
    border: 0px; 
    vertical-align: baseline; 
} 

line-height non funziona