入力のfont-sizeがインラインブロックの境界を壊すのはなぜですか？

Question

私は最近、フォントサイズパラメータがわずかに異なるお互いの隣にある入力に合わせなければならないという問題を突きつけました。それは、入力要素の配置を壊すことになります。ここで

問題を示すために誇張された例：

div input { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 34px; 
 
} 
 
.field1 { 
 
    font-size: 50px; 
 
}

<div> 
 
    <input class="field1" type="text" value="test"> 
 
    <input class="field2" type="text" value="test"> 
 
</div>

それを修正するための最良の方法は何ですか？どのように2つの入力要素を隣り合わせに1行に整列させるのですか？

Answer 1

vertical-align: top;この問題の解決に役立つようです。私は入力要素を親コンテナ（この場合はdiv）の先頭に揃えるルールだけを追加しました。

div input { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 34px; 
 
    vertical-align: top; /* added */ 
 
} 
 
.field1 { 
 
    font-size: 50px; 
 
}

<div> 
 
    <input class="field1" type="text" value="test"> 
 
    <input class="field2" type="text" value="test"> 
 
</div>