css - CSS で行の高さをどのように指定しますか? 1 つのグローバル宣言か、それとも各要素に固有か?

Question

これは漠然とした質問かもしれませんが、Web サイトを作成する際の行の高さに対する最適なアプローチが何であるかはよくわかりません。サイト全体に対して 1 つのグローバル宣言を作成してから、個々の要素ごとに個別の行の高さを宣言しますか? ここでのベストプラクティスは何ですか?

Answer 1

最善の方法は、ユニットなしでボディにグローバルに設定することです。(1.5em ではなく 1.5)

この方法では、行の高さは要素のフォント サイズの 1.5 倍になり、相対的な行の高さが垂直ベースライン/垂直リズムに寄与します。

ズームによってフォント サイズが大きくなると、行の高さが新しいフォント サイズに合わせて調整されます。

Answer 2

それは、ページに何種類の行の高さを持たせるかによって異なります。ほとんどが同じになる場合は、Lowkase のアドバイスに従い、タグにデフォルトを設定してからbody、他のタグにバリエーションを設定します。または、たとえば.lhs(行の高さが小さい) 3 つのクラスを作成し、これらのクラスを要素に配置して、行の高さを指定することも.lhmできます。.lhlこのようにして、行の高さを指定するために使用するコードの行数を最小限に抑えることができます。

.lhs {
    line-height: 10px;
}
.lhm {
    line-height: 30px;
}
.lhl {
    line-height: 50px;
}