プログラミング学習 masa blog (pa○zaで就職できるのか!?)

masaです。 持病(アトピー)と格闘しながら、家事育児を行い 且つプログラミング学習をしつつ転職を夢見る一般男性。 主に、プログラミング学習、アトピー、育児について思ったことを自分のメモがわり書いていくつもりです。 恥ずかしいし頭悪いからあんまり見ないでね。

CSS基礎文法編 line-heightについて

早朝からたまたまやっております。

 

line-heightって奥深いなと思った。。。

 

よく使いそうなは、

line-height: 〇; (数字のみ) 

 

理由は、こんな感じ(であってるとおもう)

 

htmlが下記であった場合

<main>
        こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。
        <section>
            こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。
        </section>
    </main>

css

main {
    font-size32px;
    line-height2em;
  }
  
  section {
    font-size16px;
  }

とすると、

 

2emと指定しているので、fontosizeの2倍である64pxが行の高さとなり且つ、

継承されるので、sectionタグにも64pxが適用される。

なので見た目があまりよくないようです。

下のsectionのほうのこんちはの行間広すぎる。

 

f:id:masamonkey:20200803070822p:plain

 

 

今度はcssのline-heightを2にすると

main {
    font-size32px;
    line-height2;
  }
  
  section {
    font-size16px;
  }

sectionタグ内でも2倍の計算をしてくれるので

mainタグの行の高さは64pxで、sectionタグ内は32pxの行の高さとなるので

自然な感じになる。

 

f:id:masamonkey:20200803070954p:plain

狭まったのわかるかな?参考程度の画像です。

 

なんで、line-heightは数字のみ;ですね。

またやろう✋(オ〇ロスキー)