The Issue:
Recently, while working on a login form, I encountered an issue where input text boxes would have unnecessary whitespace above them, which would then cause them not to align with an image that I was using as the submit button:
The tops of the "User Name" and "Password" text boxes
should align with the top of the "Go" button.
The Solution:
It took a little while of working with the CSS to identify the issue. I of course first made sure that the padding and margins for all elements were set to zero, yet didn't have any luck. I also set the line-height for each of the elements to zero, just in case, but again, no luck. What did do the trick was to assign the input text boxes the property: "vertical-align: top;". I guess input fields have a default value for the vertical-align property set to middle, while the same property for an image input field is top? As odd as that is to me, this seems to do the trick and solve the whitespace issue.
