Question

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 the 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.

Answer 1

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.