ハーフ・レディング算出用の SCSS の mixin

line-height による余白

「セクション間は 50px 空けたい」という場合、margin-top: 50px;という指定をすると50px以上空いてしまいます。

これは line-height の仕様により、以下のように行の上下に line-height - font-size から算出された値が割り当てられるからです。

この例の7pxの部分をハーフ・レディングと呼びます。
そのため、50px に 7px が加わり、57px の余白になってしまいます。

解消方法

厳密に余白を設定したい場合は、以下の設定をする必要があります。

• margin-top: 43px; を設定する
• margin-top: -7px; を見出しに設定する

しかし、どちらにしても毎回計算をするのは面倒なため、ハーフ・レディング用の mixin を作成し、計算を自動化しておくと効率が上がります。

mixin の作成

_mixin.scss

@mixin lineHeightCrop($fontsize:16, $lineFeed:24) {
  $lineheight: $lineFeed / $fontsize;

  &::before,
  &::after {
    display: block;
    width: 0;
    height: 0;
    content: "";
  }

  &::before {
    margin-top: calc((1 - #{$lineheight}) * 0.5em);
  }

  &::after {
    margin-bottom: calc((1 - #{$lineheight}) * 0.5em);
  }
}

hoge.scss

.hoge {
  font-size: 1.5rem; // 24px
  @include lineHeightCrop(24, 38);
}

Photoshop からコーディングを行う場合は、フォントサイズの 24px を第一引数に、行送りの 38px を第二引数に入れます。

最後に

厳密には、前のセクションがテキストで終わっている場合はそのテキストと、次のセクションの見出し等のテキストに設定する必要がありますが、前のセクションのテキストは影響が小さい場合などは割愛してもよいかと思います。

また、Windows10 / IE11 及び Edge では正常に動作しました。

尚、この minin は以下の記事を参考にしています。
上記 mixin では、line-height の計算をするのを省きたいので、Photoshop の数字を直接入力できるように変更しています。
mixin を作るメリットなども詳細にまとめてあり参考になります。

参考：line-heightの不要な上下の余白を打ち消して、デザインデータに沿ったコーディングを効率化する方法