INPUT和LABEL之间的行高不一致

Question

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

label的高度为16px，input为18px ......为什么？

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

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屏幕截图显示16 / 18px高度差异且无border，margin或padding：

Answer 1

您可能会对CSS中line-height代表的内容感到困惑。它实际上确定段落中的行间距，而不是相应HTML控件的实际高度。

仅供参考，差异是高度是由输入中存在的1px边框引起的，但标签中没有。

Answer 2

来自MDN's documentation：

  

替换内联元素，如按钮或其他输入元素，   line-height没有效果。

如果删除行高，则两个元素的计算高度均为18px。通过将行高设置为font-size（和fyi，通常将line-height设置为无单位值，例如1将等于fontx size的1倍。）通过将其设置为16px，它实际上是根据默认的行高限制高度，从18px（自然高度）到16px（行高约束值）。如果您将line-height设置为.5，you'll notice the effect会更加显着：

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