css - 入力に ​​em フォントサイズを使用する場合にのみ、本文 CSS が入力 CSS に影響するのはなぜですか?

Question

本文フォントと入力フォントは別物だとずっと思っていました。たとえば、HTML にこれがあるとします。

<div>テストテキスト</div>
<input type="テキスト"/>

そして、これは私のCSS用です:

体 {
  フォント:2em verdana;
}

div フォントのみが大きく、入力テキストは小さいままです。しかし、この CSS を追加すると:

入力 {
  フォントサイズ:1em;
}

次に、入力フォント サイズが本文のフォント サイズになります。なぜ？

Answer 1

あなたは最初の文で正しいです：入力要素は通常フォントサイズを継承しません。

emこれを使用する1emと、定義上、要素のフォントサイズが機能しなくなります。font-sizeをに設定するとem、要素自体が機能しないため、親要素のfont-sizeに基づきます。絶対フォントサイズはもうありません。

したがって、入力での使用font-size: 1emは、基本的font-size: inheritに入力やpxボディ設定での使用に似ています。