要素間の余白の計算

使い方

line-heightが考慮されていないデザインデータで、line-heightを含んだ本来必要な要素間の余白を求め、em単位に変換します。

下記のサンプルデータでは要素間に40pxの余白が空いていますが、単純に40pxの余白を与えるとブラウザ上で各要素のline-heightが計算され、40px以上の余白が空きます。

要素間の余白を求めるのでひとつめの要素(上の要素)とふたつめの要素(下の要素)のそれぞれの行間・文字サイズと、間のほしい値の5つのデータを扱います。

ひとつめの要素に設定したい場合とふたつめの要素に設定したい場合でem値が異なるので、好きなほうをコピーしてお使いください。

サンプルデータを計算式に当てはめた結果

下記の計算式で本来使用するpx値を求めることができます。

この計算式からemに置き換えて設定すると以下のようになります。