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

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

対応前

まず発生した状況ですが、normalize.cssNoto 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を指定していない場合は文字が切れていなかったので、フォントの種類によって行間を調整する必要がありそうです。

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2021年6月
 12345
6789101112
13141516171819
20212223242526
27282930