Bonjour,
 
J'ai un formulaire et je souhaiterais rendre les input text un peu plus habillés en affichant devant une zone de couleur avec des icônes à l'intérieur (en l'occurence avec Font Awesome).
 
En gros mon HTML (tout ce qu'il y a de plus simple):
 

 
L'input text à une hauteur de 30px, plus des bordures de 1px.
Afin d'arriver à la même hauteur, le span fait 34px (déjà je trouve ça bizarre mais bon...). Mais je ne parviens pas à l'aligner parfaitement avec l'input text, il y a toujours un petit décalage avec le haut ou le bas suivant que je joue avec la hauteur, le padding-top, etc...
J'y étais parvenu sur un formulaire et là, je le réutilise sur un autre et j'ai des décalages (et pas de CSS en conflit)...
 
Bref, si vous avez des astuces pour que cet alignement fonctionne à coup sûr, ça serait parfait...
 
Merci!

En y regardant de plus près, il se trouve que l'input text n'est pas vraiment collé en haut de la balise form à l'affichage, ce qui crée ce décalage vers le haut des autres contenus du formulaire.
J'ai beau mettre des padding et des margin à 0, rien n'y fait.
 
Mon input text fait 34px de haut tandis que le form en fait d'après Firefox 37.5...

Bon, je viens de trouver une solution, je ne sais pas si c'est la meilleure mais ça fonctionne laors je le mets au cas où d'autres seraient confronté au même souci.
 
J'ai tout simplement mis mon form en display:flex, en flex-direction:row et nowrap.
Tout est bien aligné et plus de souci de marge haut dessus de l'input...
 
S'il existe une solution plus "propre" je suis preneur, j'ai une sensation de bricolage là...