【CSS】余白を均等にしているのに、文字の高さが中央に来ないこんときは line-height を試してみよう

プログラミングを勉強中のみなさん、こんにちは！

余白を均等に設定したのに、文字が（高さ的に）中央にきてないような・・・・。
と疑問を感じた方へ。

line-height を試してください。

詳しく見ていきます。

私の経験

*********＜div＞*********************
padding-top 10px
------------------------------

文字　font-size 30px

------------------------------
padding-bottom 10px
**********＜/div＞*******************

こんなイメージでコーディングしました。

余白の上下は 10px で同じなのですから、
当然文字の高さは要素の中央にくる、と思いますよね。

しかし、実際のプレビューでは、

*********＜div＞*********************
padding-top 10px
------------------------------

文字　font-size 30px（下に偏っている）

------------------------------
padding-bottom 10px
**********＜/div＞*******************

こんな感じで、文字自体が下方向に偏ってしまいました。

そこで試したのが　line-height　です。
CSSで、文字<p>に対して　line-height　を設定しました。
値は　font-size と同じ　30px　です。
<line-height:30px;>

そうすると、イメージしたとおり、

*********＜div＞*********************
padding-top 10px
------------------------------

文字　font-size 30px

------------------------------
padding-bottom 10px
**********＜/div＞*******************

文字が（高さ的に）中央にきました。

他にも解決方法があるかもしれませんが、ひとまず参考の一つとして、
line-heightでの対処法を御紹介しました。

余白は均等なのに、高さ的に偏っている現象は、
line-height　をお試しください。

line-heightの詳細はこちらもどうぞ。
line-height

中央寄せ関連の記事も紹介します。↓