frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

marginとline-heightの計算ツールを作ってみた

スポンサードリンク

marginとline-heightの計算ツールを作ってみました。
実際はmixinなどで動かす方が効率よいと思います。

ちょっとした作業でscssの設定などをしていない時に使っていただければと思います。

マージン

フォントサイズ

行間

割合



経緯

テキストの上下marginのマージンは非常に厄介で、行間(line-height)が足されたものが、ブラウザ上に表示されます。

そのため、デザイナーが作成したpsdのテキストとその下の要素が20pxに設定されていたとしても、コーディングでmargin-bottom:20pxを設定しても20px+行間が発生してしまいます。

詳しい解説や計算方法の説明は下記ブログを参照ください。

1.5rem(今回の場合は15px)のline-height: 1.8;なので1.8倍で27pxがp要素の行の高さ。そこから自身のテキスト分1.5remを引いてあげた12px分が、均等に上下に割り振られているから、2で割った6pxがテキストの上の部分の余白になる。これを20pxから引いた数字(つまり14px)をh1のmargin-bottomに指定してあげれば、余白をぴったり20pxにできるという計算。

simpleism.net

ただ、テキストの次の要素がテキストだった場合、そのテキストもline-heightを持っているため、割る2が必要なくなります。その場合割合を1にします。

  • テキストの次の要素がbox系だったら割る2
  • テキストの次の要素がテキスト系だったら割る1

しかし、これも次のテキストのフォントサイズが違っていたら合わなくなりそうです。

まとめ

なかなかややこしいですが、いつも感覚や定規ツールで図ってるのがわずらわしい方はお試しください。