O estilo de entradas de texto (por exemplo, senha, e-mail, etc.) com largura fixa e preenchimento horizontal é sempre difícil, pois precisamos levar em consideração que o valor do preenchimento adiciona à nossa largura final (essa frase faz algum sentido ?!)
De qualquer forma, todos nós ‘deveríamos’ saber disso box-sizing: border-boxagora, mas se por algum motivo você não quiser usar isso devido ao suporte do navegador ou qualquer outra coisa, aqui está o que eu faço às vezes:
CSSinput[type="text"] { width: 220px; font-size: 14px; line-height: 24px; text-indent: 12px; /* This is the magic */}</pre></code>
Basicamente, usando text-indent, podemos empurrar o texto da borda esquerda da entrada em vez de fazer isso compadding-left
Pequeno truque estúpido.