inputに入力したテキストの上下が切れる

フォームのコーディングをした際、入力したテキストの下部が切れてしまう現象に遭遇したので、原因と対応方法をメモ。

対応前

まず発生した状況ですが、normalize.cssとNoto Sans JPを合わせて使った際に遭遇しました。
対応前のデモページ

paddingでinput内に余白をとっているのですが、gやyなどのベースラインより下まである文字が切れてしまっていました。

対応方法

normalize.cssだとinputのline-heightの値が1.15になっているのですが、この行間を広げることで解決できました。

input {
	padding: 6px 8px;
	font-family: "Noto Sans JP",sans-serif;
	line-height: 1.4;
}

line-height調整後のデモページ
ただ、Noto Sans JPを指定していない場合は文字が切れていなかったので、フォントの種類によって行間を調整する必要がありそうです。