スクロール問題は

Question

私はline-height値ではなくnormalと<1.6で<span>と<input>にスクロールすることができます。しかし、私が使用しないときサンセリフ。 line-height:1.4を使用すると、スクロールがないことが予想されます。

私には分かりませんが、inline-blockの動作のためですか？ここで

.box { 
 
    padding: 0; 
 
    margin: 0; 
 
    background-color: white; 
 
} 
 
input { 
 
    display: inline-block; 
 
    line-height: 1.4; 
 
    font-size: 16px; 
 
    font-family: Titillium web; 
 
    padding: 0; 
 
} 
 
input.test { 
 
    line-height: 1.2; 
 
} 
 
input.test-2 { 
 
    line-height: normal; 
 
} 
 
span { 
 
    display: inline-block; 
 
    line-height: 1.4; 
 
    font-size: 16px; 
 
    font-family: Titillium web; 
 
    overflow: auto; 
 
    padding: 0; 
 
     
 
    background-color: aqua; 
 
} 
 
    
 
p { 
 
    font-size: 16px; 
 
    font-family: Titillium web; 
 
    line-height: 1; 
 
    padding: 0; 
 
    margin: 0; 
 
}

<div class="box"> 
 
    <span>@@@@</span><input type="text" value='@@@@' /><input class="test" type="text" value='@@@@' /><input class="test-2" type="text" value='@@@@' /> 
 
</div> 
 
<p>@@@@@@@@@@@@@</p>

私の質問です：

1. は、各フォントファミリです異なる最適line-heightをしていますか？
2. その場合、line-height: normalを使用する必要がありますか？多くの記事は特定のものを使用することを示唆しているので、line-height

Answer 1

行の高さとフォントサイズで同じ値を使用してください。 1.4の代わりに、行の高さに16pxを入れてください。