The form element input with type text strangely refuses to align with an adjacent image button (input element of type image). The problem is rather hard to solve as regular methods like using align or margin or padding or even adding whitespace to the image fails. Here is a surprisingly simple solution to this problem. But first lets take a look at the problem.

The input textbox above is misaligned with the image button above as you can see. The code is:


  
  

The solution is deceptively simple. Here is the code which works:


  
  

Here is the demo: