line-heightの単位はemではない

line-heightの単位としてemを使うのは実は良くなくて、単位なしで指定するのが正解。

line-height - CSS | MDN より引用

パーセンテージ と em 値は、予期しない結果を生むかもしれません。

使用値は、この単位のない <数量> に要素のフォントサイズを掛けたものになります。計算値は、指定された <number> と同じです。ほとんどの場合、継承時の予期しない結果を避けるために、これが line-height をセットする好ましい方法です。


line-heightはフォントサイズを基準として掛け合わされる数値なので、単位を付ける必要はない。
むしろ単位をつけると継承に問題が生じる。

ずっとem付けてたけど、間違いだったとは…。
単位なしで指定してるのを見かけても、つけ忘れてるんだと思ってました(*ノω・*)

テーマ: HTML - ジャンル: コンピュータ

Scssの変数をcalcで使う

最新のCSS3の calc()は、動的な計算ができる便利な関数だ。
一方、Scss(sass)の変数と計算式では静的な計算しかできない為、これらを組み合わせて使いたい時がある。
例えば次のような場合。

$m: 10px;
width: calc(100% - ($m * 2));
margin: 0 $m;


一見これは上手く行きそうだが、出力結果はこうなってしまう。

width: calc(100% - ($m * 2));
margin: 0 10px;


(´・ω・`)…
そこで、インターポレーションを使って、こうする。

width: calc(100% - #{$m*2});

結果は、

width: calc(100% - 20px);

ブラボー!Scss+calcって素晴らしいですね(`・ω・´)
もっともこの例だと width: auto;でも良いんですけどね!

テーマ: HTML - ジャンル: コンピュータ