line-heightで先頭と最後も余白が入ってむかつく

XDでこういった余白が設定されていたとします。

行間(line-height)は、デザインでは文字サイズが16pxに対して行間が48pxなので
行間48px÷文字16px=3と計算しline-height:3;を設定。
余白(margin-top)は50pxを設定。
それがこちら :writing_hand:

See the Pen
line-heightの余白がムカつく by himeka223 (@himeka223)
on CodePen.

デザインにしっかり合わせたはずなのに、余白めっちゃ開いちゃってます。
むかつきますね。 :frowning2:

これは、line-heightにより先頭と最後も余白が入っちゃっているからです。
最初のデザインがこんな感じでつくられちゃってます :frowning2:

じゃあ、50pxからline-heightでできちゃった先頭と最後の余白分をひいてうまいことやれば、、、 :robot:
、、、毎回そんな事考えていたら超大変です。

最強そうな Mixin を見つける

なにか方法ないかなあと探していたらこんな記事を見つけました。
[CSS]テキスト要素の先頭行だけline-heightを取り除き、上ぴったりに揃えるスタイルシートのテクニック | コリス

先頭行だけline-heightでできた上スペースを取り除き、上に揃えるスタイルシートのテクニック

@mixinlhCrop($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;で相殺された余白分をカット**させる。

@mixinlhCrop($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);}}