有限会社ハートブレーン自然豊かな環境で、ハートフルな業務を展開中。単位はいらない?どっちでも良いんじゃない?そう思っていた時期もありました。今日、実際にそれが覆されました。line-heightの値を1.8emにしたら、上の図みたいになったのですがemを消して1.8と数字のみにしたらこれまで、単位なし=emだと思い込んでいたのですが、どうやら違うようです。詳細は8年くらい前に指摘されていたブログがありました。浦島太郎と名乗ることすら浦島太郎に失礼だと思えてきました。emや%の単位付きで指定した場合、子要素にも同じ値が継承されるということらしいです。class="box">親要素に行間の指定をかけた場合、子要素に継承されるらしいけど、line-height(というか全てのCSS)の中にinheritっていう親要素を継承させるように指定する値があったはずなんだけど、その設定はどうなったんだろう。class="top">文字が小さいとこうなります。1.5という控えめな設定にしたから、emが付くと良い具合に空きそうな気もするけど、これで2emとかやっちゃったらきっと大変。pxは使わない方が良いってのはどこのブログも共通らしいけど、1行を縦中央にセンタリングしたい時に普通に使ってる。考え直すべきなのかな。class="bottom">文字が大きいとこうなります。行間詰まってると確かに読みにくい。line-heightは1.7くらいが好みだったんだけど、最近1.8好みになった。我ながら人に影響されやすい。</p></div>こんなHTMLタグがあったとします。}親要素に行間の指定をかけた場合、子要素に継承されるらしいけど、line-height(というか全てのCSS)の中にinheritっていう親要素を継承させるように指定する値があったはずなんだけど、その設定はどうなったんだろう。文字が小さいとこうなります。1.5という控えめな設定にしたから、emが付くと良い具合に空きそうな気もするけど、これで2emとかやっちゃったらきっと大変。pxは使わない方が良いってのはどこのブログも共通らしいけど、1行を縦中央にセンタリングしたい時に普通に使ってる。考え直すべきなのかな。文字が大きいとこうなります。行間詰まってると確かに読みにくい。line-heightは1.7くらいが好みだったんだけど、最近1.8好みになった。我ながら人に影響されやすい。12pxだと上下6pxずつ空きます。20pxだと上下2pxずつしか空きません。}親要素に行間の指定をかけた場合、子要素に継承されるらしいけど、line-height(というか全てのCSS)の中にinheritっていう親要素を継承させるように指定する値があったはずなんだけど、その設定はどうなったんだろう。文字が小さいとこうなります。1.5という控えめな設定にしたから、emが付くと良い具合に空きそうな気もするけど、これで2emとかやっちゃったらきっと大変。pxは使わない方が良いってのはどこのブログも共通らしいけど、1行を縦中央にセンタリングしたい時に普通に使ってる。考え直すべきなのかな。文字が大きいとこうなります。行間詰まってると確かに読みにくい。line-heightは1.7くらいが好みだったんだけど、最近1.8好みになった。我ながら人に影響されやすい。12pxだと上下3pxずつ空きます。20pxだと上下7pxずつ空きます。文字の大きさに行間が左右されるより、ある一定の行間を保った方が無難、という考え方のようです。このような意見もあるのが面白いですね。WATCH様)ある要素内で一部だけ他より大きな文字サイズを指定されたテキストが存在する場合でも、レイアウト的にそのテキストに引っ張られて行間が開いてしまうのは困るという場合もあります。その場合は意図的に単位付きの値を指定することでそれを回避するといったことも考えられます。強調文字を多用するページの場合、むしろそんな仕様がなければ困ります。何にしても、無駄でしかない設定はきっと1つもないので、用途に応じて使い分けていきたいものです。私の場合、用途に応じるだけの知識をまず身に付けるべきですね。【ハートブレーン】https://heartbrain.netプログラミング【ハートブレーン】https://heartbrain.net最後までご覧いただき、ありがとうございました。よろしければ、SNSでのシェアやランキングなど、応援よろしくお願いします。