INPUT和LABEL之间的行高不一致 [英] Inconsistent line-height between INPUT and LABEL

问题描述

为什么要设置 line-height 匹配 font-size ，会导致这种奇怪的行为：

标签的高度为16px，但输入为18px ... ？

如果我更改 line-height：18px 或更高，高度将突然匹配。发生了什么？

：

像按钮或其他输入元素，
line-height没有效果。

如果删除line-height元素的计算高度为18px。通过将line-height设置为font-size（和fyi，通常将line-height设置为无单位值，例如1将等于1x的font-size。）通过将其设置为16px，它实际上基于默认行高限制高度，从18px，自然高度，到16px，行高约束值。如果将line-height设置为.5，则会更明显地注意到效果：

 输入，标签{
 line-height：.5; 
 background：#eee; 
} 
输入{
 background：#aaa; 
} 
  

Why would setting line-height to match font-size cause this strange behavior:

The height of label is 16px but input is 18px... Why?

The heights will suddenly match if I change line-height: 18px or higher. What is happening?

JSFiddle Example

<style>
label, input {

    font-size: 16px;
    line-height: 16px;
    padding: 0;
    margin: 0;
    float: left;
    border: none;            
    font-family: Arial, Helvetica, sans-serif;
}
label {
    position: absolute;
}
</style>
<form>
    <label for="email">Enter your email</label>
    <input type="email" name="email" />      
</form>

Chrome v36 screenshots showing the 16/18px height difference and no border, margin, or padding:

解决方案

From MDN's documentation:

On replaced inline elements, like buttons or other input element, line-height has no effect.

If you remove the line-height, both elements will have a computed height of 18px. By setting the line-height to the font-size (and fyi, typically line-height is set to a unit-less value for example 1 would be equal to 1x the font-size.) By setting it to 16px, it is actually restricting the height based on the default line-height, from 18px, it's natural height, to 16px, the line-height constrained value. If you set the line-height to .5, you'll notice the effect more dramatically:

input, label {
    line-height: .5;
    background: #eee;
}
input {
    background: #aaa;
}

这篇关于INPUT和LABEL之间的行高不一致的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！