縦方向の余白

このウェブサイトの縦方向の余白は、行間の高さを単位にして組み立てている。行間の高さを、文字の大きさによらず一定にした上で、要素間の余白がその整数倍で表示されるようにしている。

body {
    font-size: 1rem;
    line-height: calc((16 + 12) / 16);
}

h1 {
    font-size: calc(23 / 16 * 1em);
    line-height: calc((23 + 12) / 23);
}

figcaption {
    font-size: calc(13 / 16 * 1em);
    line-height: calc((13 + 12) / 13);
}

要素間の余白は、実際に表示される結果を意図した大きさにしたいので、内容が文字の要素には line-height 分を差し引いた margin を指定したい。

p {
    margin-bottom: calc((12 * 3 - 12 / 2) / 16 * 1em);
    margin-top: calc((12 * 3 - 12 / 2) / 16 * 1em);
}

輪郭がはっきりした要素は line-height 分を差し引く必要がないので、欲しい margin をそのまま指定したい。

figure,
pre {
    margin-bottom: calc(12 * 3 / 16 * 1em);
    margin-top: calc(12 * 3 / 16 * 1em);
}

これらを両立させるために、どの要素も表示上の margin-bottom をゼロにして辻褄を合わせている。

p {
    margin-bottom: calc(12 / 2 / 16 * 1em * -1);
    margin-top: calc((12 * 3 - 12 / 2) / 16 * 1em);
}

figure,
pre {
    margin-bottom: 0;
    margin-top: calc(12 * 3 / 16 * 1em);
}

文字自体も多少の余白を持っているので、文字が大きいほど表示上の余白は大きくなるが、実際に使われるフォントは OS やブラウザーによっても違うので、そこまでは気にしないことにしている。