Question

I’ve been unable to specify the vertical position of text in an input field using padding or line-height. The following code SHOULD render a text input with text pushed to the bottom:

<input style="padding: 50px 0 0 0; height: 0px;" type="text" value="Hello" />

What’s happening instead is that all text is being centered vertically in an input that is 50px tall.

Any thoughts on how to resolve this?

Answer 1

You can’t do it on a standard textbox without oddball trickery (as in, creating a div with a border that looks like a textbox, and the removing the border from the textbox itself and vertically positioning it to the bottom of the div), so you’ll have to resort to a textarea element…

<textarea style="padding: 50px 0 0 0; resize: none;">Hello</textarea>

(Adding resize: none; stops the user from changing the size of the textarea)