line-heightで先頭と最後も余白が入ってむかつく
行間(line-height)は、デザインでは文字サイズが16pxに対して行間が48pxなので
行間48px÷文字16px=3
と計算しline-height:3;
を設定。
余白(margin-top)は50pxを設定。
それがこちら
See the Pen line-heightの余白がムカつく by himeka223 (@himeka223) on CodePen.
デザインにしっかり合わせたはずなのに、余白めっちゃ開いちゃってます。
むかつきますね。
これは、line-heightにより先頭と最後も余白が入っちゃっているからです。
最初のデザインがこんな感じでつくられちゃってます
じゃあ、50pxからline-heightでできちゃった先頭と最後の余白分をひいてうまいことやれば、、、
、、、毎回そんな事考えていたら超大変です。
最強そうな Mixin を見つける
なにか方法ないかなあと探していたらこんな記事を見つけました。
[CSS]テキスト要素の先頭行だけline-heightを取り除き、上ぴったりに揃えるスタイルシートのテクニック | コリス
先頭行だけline-heightでできた上スペースを取り除き、上に揃えるスタイルシートのテクニック
@mixin lhCrop($line-height:$base-line-height, $capital-letter: 1) {
&::before {
content: '';
display: block;
height: 0;
width: 0;
margin-top: calc((#{$capital-letter} - #{$line-height}) * 0.5em);
}
}
まさに私が探し求めていたものです!
記事ではなにやら難しい話ししてますが、私はシンプルに使いたいので、
とりあえずこのMxinで使ってみます!
かんたんに説明すると
before要素のmargin-top
に指定したネガティブマージンで
line-height
でできてしまった先頭行の余白を相殺しています!
相殺する値の計算はcalc
で行っていて、
1 - #{$line-height}) * 0.5em
-
$capital-letter
はデフォルトは1
で、font-size=フォントの高さ
の場合(font-sizeの75%の高さのフォントなら.75
) -
$line-heigh
は引数で設定したテキストのline-height
- **1.から2.**をひくとテキスト1行分の、上と下の余白を足した数になります
- **3.**を
× 0.5em
することで、上のみの余白数をだします
マイナスの値になるので、そのまま相殺しています!
少し改良
このままだと、先頭行の余白しか相殺してくれてないので、最終行も余白をafter要素で削っちゃいます。
さらに**overflow:hidden;
で相殺された余白分をカットさせる。
@mixin lhCrop($line-height:$base-line-height, $capital-letter: 1) {
overflow:hidden; //相殺した余白をカット
&::before {
content: '';
display: block;
height: 0;
width: 0;
margin-top: calc((#{$capital-letter} - #{$line-height}) * 0.5em);
}
&::after{
//最終行も取り除く
content: '';
display: block;
height: 0;
width: 0;
margin-top: calc((#{$capital-letter} - #{$line-height}) * 0.5em);
}
}
※overflow:hidden;
でカットしたことで、どこかでやりづらくなりそうな気もするけど、とりあえずカット。(そうなったとき考える)
さっそくさっきのコードにつけてみます
See the Pen Mixin lhCrop by himeka223 (@himeka223) on CodePen.
きれいに余白が潰れました!
まだまだもとの記事を解読する必要もありますが、とりあえずはこれで使ってみます!
これで少しでもコーディングのスピードと精度が上がると嬉しいです