テキストボックスの高さを○○pxにしたいと思った際に、じゃあデフォルトってどうやって決まっているんだっけ？という疑問を持ったので、それに対する考察
テキストボックスのサイズは
テキストの高さ＋内余白＋線
で求められますよっと
つまり
テキストの高さ（font-sizeの値）＋内余白（paddingの値）＋線（borderの値）
だと思っていたら、ちげーじゃねーかばかやろーって話です。
テキストの高さ（font-sizeの値）っていうのが違うわけで
例えば16pxに指定した場合
font-size: 16px;
height: 18px; （20px）
これは18pxとか20pxとかそういう値になるわけです。
なんで16pxじゃないかというと、英字にはディセンダというqとかの下のはみ出る部分がありますね。
これのサイズが加味されている気がします。
18pxとか20pxになるのは、フォントによって定義が違うためです。
Arialなら18px
Meiryo UIなら20px
※ちなみにMSゴシックは16pxだった
うーむｗｗ困った
んじゃー複数指定した場合はどうなるのかというと
例：Arial、Meiryo UIで指定
これはArialの18pxになります。
なんでやｗｗｗでかい方に合わせろやｗｗ
例２：MSゴシック、Arialで指定
これもArialの18pxになります。
なるほど、英語フォントに合うわけですな（ディセンダあるの英語だもんね）
っていうのが考察
間違ってたら教えて
コメント
コメントを投稿