ふるぽんブログ Written by FURUPON

【CSS】line-heightとmarginを設定したら、余白が多くなる

Web制作

こんにちは、ふるぽんです。

少し前のぼく「デザインカンプ通りにline-heightとmarginを設定してもカンプ通りにならないー」

値が間違っていませんか?

少し前のぼく「正確に設定したけど、少しだけ余白が多い気がする」

ハーフリーディングじゃない?

line-heightを設定することによって生まれる「ハーフリーディング」が問題の可能性

先日、このハーフリディングに気づかずに???って頭をかしげましたので、忘備録として残しておきます。
同じように悩んでいる方の、お役に立てれば嬉しいです。

では参りましょう。

Line-heightとは?

そもそもline-heightとはなんでしょう?
復習しましょう!

簡単に言えばline-heightは、行の高さを指定する時に使用します。

おそらくみなさん,pxか1.5などの倍率で設定することが多いと思います。

例えばフォントサイズが24pxでline-heightが1.5だった場合、
24×1.5=36
36-24(フォントサイズ)=12px

この12pxがハーフリーディングとして行の高さに設定されます。
上下でそれぞれ6pxずつですね。
line-heightの説明
したがって仮にテキストにmargin-topを100pxで指定していたら、合計106pxになってしまうのです。
フォントサイズやline-heightの値が大きければ、ハーフリーディングも大きくなります。

みなさんline-heightに加えてmarginなど設定する際には気をつけましょう!
以上line-heightについてでした。

以下は40代の僕がweb制作で食べれるようになるまでに、やったことを40代以上の方に向けて書きました。
ぶっちゃけ40代じゃなくても参考にはなると思います。

ゲームで仮想通貨の不労所得を稼ぐ【オンラインカジノBetfuryのやり方】