【CSS】line-heightとmarginを設定したら、余白が多くなる
こんにちは、ふるぽんです。
少し前のぼく「デザインカンプ通りにline-heightとmarginを設定してもカンプ通りにならないー」
値が間違っていませんか？
少し前のぼく「正確に設定したけど、少しだけ余白が多い気がする」
ハーフリーディングじゃない？
line-heightを設定することによって生まれる「ハーフリーディング」が問題の可能性
先日、このハーフリディングに気づかずに？？？って頭をかしげましたので、忘備録として残しておきます。
同じように悩んでいる方の、お役に立てれば嬉しいです。
では参りましょう。
Line-heightとは？
そもそもline-heightとはなんでしょう？
復習しましょう！
簡単に言えばline-heightは、行の高さを指定する時に使用します。
おそらくみなさん,pxか1.5などの倍率で設定することが多いと思います。
36-24(フォントサイズ）=12px
この12pxがハーフリーディングとして行の高さに設定されます。
上下でそれぞれ6pxずつですね。
したがって仮にテキストにmargin-topを100pxで指定していたら、合計106pxになってしまうのです。
フォントサイズやline-heightの値が大きければ、ハーフリーディングも大きくなります。
みなさんline-heightに加えてmarginなど設定する際には気をつけましょう！
以上line-heightについてでした。
以下は40代の僕がweb制作で食べれるようになるまでに、やったことを40代以上の方に向けて書きました。
ぶっちゃけ40代じゃなくても参考にはなると思います。
40代からはじめる副業！プログラミング学習してWebサイト制作で月10万稼ぐ方法 – ふるぽんブログ
44歳の僕でも独学でプログラミング学習をはじめて、初案件から半年で、100万円以上売り上げました。 40代の方はもちろん、それ以外の方のお役に立てればと思います。Web制作は再現性が高く、副業に最適かとおもいます。40代以上のWeb制作で月10万稼ぐまでのステップアップとプログラミング学習の心得を解説していきます。
さばかんブログ - ビットコインなどの仮想通貨とNFT、おすすめの副業などの情報を発信
仮想通貨（暗号資産）初心者のあれこれを発信します。仮想通貨を勉強したい方、これからビットコインなどを始めたい方への記事を、初心者にも分かりやすく解説していきます。
ゲームで仮想通貨の不労所得を稼ぐ【オンラインカジノBetfuryのやり方】