<input> has mysterious bottom padding

Question

I am trying to do some quite precise styling on some form elements, and this issue is causing me a lot of grief.

If I try to remove padding, margi

Answer 1

Are you sure they're using the exact same font (including size)?

Try adding box-sizing: border-box to the input.

I've never had this issue myself, but I've only used it as a test somewhere in IE9...

Answer 2

The <input> has a minimum line-height based on font size. Setting both elements to a larger line-height value works, as does removing line-height altogether. But that still doesn't allow you to have smaller heights than the minimum. The fix for that is using the first-line pseudo-element and setting it to display: inline-block;.

Demo: http://jsfiddle.net/ThinkingStiff/B7cmQ/

CSS:

.normalised:first-line {
    display: inline-block;    
}

But this doesn't explain why the <input> is acting differently than the <div>. Even -webkit-appearance: none; didn't fix it. It would seem there is some invisible voodoo on inputs that treats its contents as inline. inline elements have minimun line-height based on font size, which is the behavior we're seeing here. That's why first-line fixes it. It seems to be styling the "child" element of the <input>.

Here's a demo that shows the minimum line-height on inline elements. The <div> element honors line-height: 7px;. The <span>, even though its computed value is showing 7px;, is not honoring it visually.

Demo: http://jsfiddle.net/ThinkingStiff/zhReb/

Output:

HTML:

<div id="container"> 
    <div id="div-large">div <br />large</div> 
</div> 
<div id="container"> 
    <div id="div-medium">div <br />med</div> 
</div> 
<div id="container"> 
    <div id="div-small">div <br />small</div> 
</div> 
<div id="container"> 
    <span id="span-large">span <br />large</span> 
</div> 
<div id="container"> 
    <span id="span-medium">span <br />med</span> 
</div> 
<div id="container"> 
    <span id="span-small">span <br />small</span> 
</div> 

CSS:

#container { 
    background-color: lightblue;   
    display: inline-block; 
    height: 200px; 
    vertical-align: top; 
}

#div-large { 
    line-height: 50px; 
} 

#div-medium { 
    line-height: 20px; 
} 

#div-small { 
    line-height: 7px; 
}

#span-large { 
    line-height: 50px; 
    vertical-align: top; 
} 

#span-medium {
    line-height: 20px; 
    vertical-align: top; 
} 

#span-small {
    line-height: 7px;
    vertical-align: top;
}

Answer 3

I know I'm months late to this question, but I ran across it in a Google search and wanted to add one thing that might help clarify some of the other answers with regard to the <input> elements in Firefox.

The default form styling in Firefox includes some awkward CSS:

input {
   ...
   line-height: normal !important;
   ...
}

This makes it effectively impossible to override the line-height property of any form input in Firefox. The problem has existed for years, and while it seems like a no-brainer for the FF devs to remove the !important from the rule, I gather there are some under-the-hood implementation problems with doing so. Also, apparently there are some websites (including YouTube) that rely on the behavior of this rule.

For details and lots of discussion see Mozilla bug #349259. There's also a good blog post on this at 456bereastreet.com, and another (older) by Eric Meyer at meyerweb.com.

Answer 4

Removing the line-height seems to solve the problem.

See fiddle. Tested only in FF tho.