cssでの絶対値

デザインデータからコーディングするとき要素ごとの余白やフォントサイズの値をcssに反映させることがあるでしょう。

.text_box{
    line-height:27px;
    font-size:18px;
}
.text{
    line-height:36px;
    font-size:24px;
}

絶対値で行間を指定すると上記のように.textや.text_box対してどちらも行間が文字サイズの1.5倍となっています

.text_box{
    line-height:1.5;
    font-size:18px;
}
.text{
    font-size:24px;
}

今度はline-heightを相対値にすることでフォントサイズが変わっても.text_boxの子要素に対し、行間が文字サイズの1.5倍でされます。
この利点としてフォントサイズの調整があっても行間の値を修正する必要がなくなります。

また、フォントのプロパティ(color,font-size,line-height)などは親要素に設定した値を子要素に継承することが可能なので、子要素にそれぞれ指定する必要がなくなります。

絶対値や単位による指定をする必要がない限り、相対値で指定したほうが、のちの修正など、管理しやすいcssの記述をすることが可能です。