Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

<input> has mysterious bottom padding

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, margin, border and outline from an <input> (with display: block) so that the size of the field is purely determined by the text, the input field ends up having a few pixels extra padding than any other block level element styled exactly the same way. Here's an example: http://jsfiddle.net/nottrobin/b9zfa/

<input class="normalised testSubject" value="hello" />
<div class="normalised testSubject">hello</div>

Rendering:

Rendering

In that example, the <div> gets a computed height of 16px while the <input> gets a computed height of 19px.

I get the same behaviour in Chrome 16, Firefox 9 and Opera 11 so it's clearly rendering engine independent.

I can fix the issue by manually adding a height, but I don't want to do that because I want the design to remain responsive.

Can anyone help me understand what's going on here, and how I can reliably make sure that the <input> will be the same height as any block level element that follows it?

like image 833
Robin Winslow Avatar asked Jan 22 '12 20:01

Robin Winslow


People also ask

What does padding-bottom mean?

Definition and Usage An element's padding is the space between its content and its border. The padding-bottom property sets the bottom padding (space) of an element. Note: Negative values are not allowed.

Is padding inherited?

And for your question, yes you have to inherit the property or define the padding for the child element.

What is padding-bottom in CSS?

The padding-bottom CSS property sets the height of the padding area on the bottom of an element.

What is padding in HTML code?

An element's padding area is the space between its content and its border. Note: Padding creates extra space within an element. In contrast, margin creates extra space around an element.


1 Answers

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/

enter image description here

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:

enter image description here

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;
}
like image 187
ThinkingStiff Avatar answered Sep 21 '22 02:09

ThinkingStiff