テキストの高さを合わせる（line-height）

2024年4月10日2026年2月2日

閲覧ありがとうございます。

この記事ではコーディングの際、テキストや画像との高さが合わずずれてしまう時の解消方法の一つを挙げています。

こんな問題を解消できます。

テキストをアイコンの真ん中の高さに合わせようとするとき、padding-topやpadding-bottomで合わせることもできます。

ですがこれだと親要素やレスポンシブ時の設定に影響を受けた場合に崩れてしまい、改めて指定が必要になり手間がかかりました。

line-heightを使うことでテキストの高さが絶対値で指定できるので環境に影響されずに表示させることができるので、レスポンシブにも対応できます。

基本的にはfont-sizeと同じ値で問題なく表示されています。

記事は以上です。

コーディング時の参考になれば幸いです。

このサイトはテーマ「SWELL」を使っています

「SWELL」はWordpress初心者も慣れた人も使い続けられるテーマだと思います。

この記事を書いた人

WordPressでサイトを作り、壊し、また作る。
フリーランスとしてココナラで実案件に向き合いながら、その経験をそのまま言葉にしています。
うまくいった設定も、試したら失敗した話も、ぜんぶここに書いています。
すでにWordPressを持っていて、もう一歩進めたい人に届けば。