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.
div{
font-family:'Arial', sans-serif;
padding:5px;
font-size:14px;
}
<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.)
(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.
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.
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.
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 .
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With