Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Removing extra padding around text

Tags:

css

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.

like image 535
Ian Hunter Avatar asked May 07 '11 22:05

Ian Hunter


People also ask

How do I get rid of text padding in Word?

Click the "Options" button at the bottom of the window to bring up the cell margin settings. From here, you can change the left, right, top and bottom margins of the cells. To eliminate all of the cell padding so that your images or text fill the entire cell, change all the settings to zero.

How do I get rid of the white space around my text?

If you want to remove all whitespaces, select the cell you use, press Ctrl + H to enable Find and Replace dialog, type a space in the Find what text box, and leave nothing in Replace with text box.

How do you remove text margins in CSS?

Adjusting the Margin Size of an HTML Element With CSS You can remove this margin by setting the top and left margin to zero. Like the padding and border, the sizes of specific sides of the margin can be set using margin-left , margin-right , margin-top , and margin-bottom .


1 Answers

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.

like image 198
Lightness Races in Orbit Avatar answered Sep 29 '22 23:09

Lightness Races in Orbit