Vertical Allignment in a Text Box

[peterinwa]

This is my CSS:

.formfields {
font-family: Verdana,Arial;
font-size: 18px;
color: #000000;
height: 27px}

This is my input box:

<input type=text size=4 maxlength=5 class='formfields' border=1>

The 27px box height is much bigger than it needs to be for my 18px text. But if I make the box height smaller, the text moves down so the bottom of it doesn't show.

Is there a way to vertically center the text within the box?

Thanks, Peter

[peterdaly]

Have you tried "padding: 5px;"?

[peterinwa]

No. Do you know where I can read what it does?

Thanks, Peter

[peterdaly]

I just did a quick Google search and found:

The Padding properties define the space between the element border and the element content. Negative values are not allowed. The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property is also created to control multiple sides at once.

I believe with INPUT, the padding attribute will specify the whitespace from the border of the element around the text that is entered (or button text.)

padding: 5px; for example will put a uniform 5 pixel border for the effect you want.

Search for css padding or something similar on the search engine of your choice for more info.