输入字段高于预期

Question

所以我得到了这个输入字段,我希望它是34px高(边框2px +填充2*10px +文本12px),但它最终高于:

• Firefox 15中的37px
• 37px在Chrome 22中
• 在IE9中36px

问题:为什么我的输入字段不是34px高？

HTML/CSS

<input type="text" class="input" placeholder="Why is this not 34px high?">?

<style>
    .input {
    border: 1px solid #000;
    font-family: Arial;
    font-size: 12px;
    padding: 10px;
    width: 200px;
}?
</style>

小提琴

更新:定义行高(12px)和设置框大小(边框)没有帮助 - 更新小提琴

Answer 1

原因是您没有为您创建的要包含的文本定义高度，如果您将其设置为 12，您将看到它的总高度为 34px。

请记住盒子模型。 http://www.w3.org/TR/CSS2/images/boxdim.png