Setting the padding of form fields in CSS

[will7]

Whenever I try to set the padding-top of one of my form fields in CSS, it increases the height! Why is this? How do I stop it from happening?

Here is my CSS code for the class "form":

.form {
height:18px;
border:1px solid #cccccc;
font-family:tahoma;
font-size:10px;
padding-left:0px;
padding-top:0px;
background-color:#ffffff;
width:120px;
}

Any ideas?

[Trico]

padding + border + height/width = total dimensions.

.example {

border-top: 1px solid #000;
padding-top: 10px;
height: 20px;

}

Will result in the same height as this:

.example {

height: 31px;

}

If you can reserve padding for inline elements and try to make do with using margins instead.

[will7]

Putting

margin-top:4px;

does not give me a space of 4 pixels from the top of the field though. How can I get it to do that?

[justlivyalife]

I presume that you have to use, though not really used CSS for forms before.

padding-top: 4px;

[will7]

Yeah, that's what I thought. But, as Trico explained, that increased the height. I had it so that it was spaced at the top without increasing the box height before, but I just cannot remember how!!

[justlivyalife]

A suggestion: Can you not make the form field, say 20px tall, then have the text valigned in the centre at 12px - will that give you what you are looking for?

[will7]

Hmmm...good point. Why didn't I think of that? How do I set the valign of text in CSS?

[justlivyalife]

http://www.w3schools.com/css/pr_pos_vertical-align.asp

[will7]

That doesn't seem to set the vertical alignment of the text to the middle

I used:

vertical-align:middle;

[justlivyalife]

Hmm.

I've never used it before, so can't really help much more, sorry!