Противоречивая высота линии между входным и 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

От MDN's documentation:

На инлайн элементов, таких как кнопки или другого элемента ввода, высота линии не имеет никакого эффекта.

Если вы удалите высоту линии, оба элемента будут иметь вычисленную высоту 18 пикселей. Установив высоту строки на размер шрифта (и fyi, обычно высота строки устанавливается на значение без единицы, например, 1 будет равно 1x размер шрифта.) Установив его на 16 пикселей, это фактически ограничивая высоту, основанную на высоте линии по умолчанию, от 18px, ее естественная высота, до 16px, значение ограничения строки. Если вы установили высоту линии в .5, you'll notice the effect более драматично:

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

Answer 2

Вы могли бы быть смущены о том, что line-height представляет в CSS. Он фактически определяет интервал между строками в абзаце, а не фактическую высоту соответствующего элемента управления HTML.

FYI, разность высот обусловлена ​​границей 1px, которая присутствует во входе, но отсутствует на этикетке.