< input>有神秘的底部填充 [英] <input> has mysterious bottom padding

问题描述

我想对某些表单元素做一些相当精确的样式，这个问题给我很多的悲伤。

如果我尝试删除 padding ， margin ， border 和从< input> （带有 display：block ）中输入该字段完全由文本确定，输入字段最终具有比以完全相同的方式定制的任何其他块级元素的多个像素额外填充。以下是一个示例：
。

任何人帮助我了解这里发生了什么，以及我如何可靠地确保< input> 将与其后的任何块级元素相同的高度？ < input> 最低 line-height 基于字体大小。将两个元素设置为较大的 line-height 值，同时删除 line-height 但是，仍然不允许你有更小的高度比最小。解决方法是使用第一行伪元素并将其设置为 display：inline-block; 。

演示：

输出：

HTML：

 < div id =container> 
< div id =div-large> div< br />大< / 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 />大< / span> 
< / div> 
< div id =container> 
< span id =span-medium> span< br /> med< / span> 
< / div> 
< div id =container> 
< span id =span-small> span< br />小< / 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 {
 lines-height：7px; 
 vertical-align：top; 
} 
  

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:

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?

解决方案

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;
}

这篇关于< input>有神秘的底部填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！