Aligner le contenu d’un champ input avec le label associé

Lorsqu’on donne une hauteur height à un champ input, il arrive que le texte saisi à l’intérieur ne s’aligne pas correctement avec la base du texte présent dans le label. Dans ce cas, je diminue la hauteur et je distribue un soupçon de padding en haut et/ou en bas selon l’alignement souhaité.

Pour un champ input de 20px de haut, on aura ainsi les valeurs :

input {
     height: 13px;
     padding: 3px 0 4px 0;
 }
 

Pour une hauteur identique à :

input {
     height: 20px;
 }

And the cat’s in the bag!