Removing extra padding around text

I have a div. And I'm trying to pad around the text 5px — no more, no less — but there's some extra spacing being thrown in there, like my browser is laughing in my face at my futile attempts to get this to do what I want it to do.

Here's the CSS I'm using:

div{
    font-family:'Arial', sans-serif;
    padding:5px;
    font-size:14px;
}

And here's my HTML:

<div>
    Sort By:
    <select>
        <option>Customer</option>
    </select>
    Search Customer:
    <input type="text">
</div>

(No styling's going on for th开发者_开发百科e input and select fields, by the way.)

And here's the output I'm getting in my browser window

(highlighted with Chrome's developer console to give you an idea of the extra spacing going on):

html output http://img715.imageshack.us/img715/2438/padding.png

Wait a second, what's going on there? I've got 5px of padding all around, and then this weird inner padding going on. I measured it in an image editor, and that extra padding or whatever I should be calling it is adding an additional 8px of padding, top and bottom.

Thought it might be a line-height problem — so I set that to 0. Didn't change a thing. Tried setting it to a negative number. Didn't work, either; in fact, Chrome wanted nothing to do with that and gave me an error.

So what's this extra stuff doing here? Does it have a name? Can I shrink it? I want exactly 5px of space around those letters, not a nearly-three-times-as-much 13px.

I appreciate the help — thanks in advance.

The form elements may be expanding the containing element. It's hard to tell, since you didn't include them in your screenshot for some reason.

If you set overflow: hidden on your div, you may see this behaviour stop. Of course, you probably don't want this; you may be better off trying to manually set the height of those form elements, and ensure that they have margin: 0 set.

Try also removing any margin from the <select> element:

select {
    margin: 0;
}

This could also be due to invisible text nodes. Try removing all whitespace from your HTML when you want pixel precision:

<div>Sort By:<select>
    <!-- in here whitespace won't matter -->
    <option>Customer</option>
</select>Search Customer:<input type="text"></div>

Try adding:

body{
    margin:0px !important;
    }