做网页的时候有一个疑问,那就是我去量有关于字体的时候该去量到哪里,大家都知道,文字是有默认行高的,我们量元素与字体之间的距离的时候不应该从贴着文字量,或者是贴着文字量出数值以后,应该减去相应地值,那么问题又来了,我到底应该减去多少才是合适准确的呢,于是我做了一个实验:
这是三个p标签,并且没有margin值,分别设置了font-size为12px 16px 20px;并且给不同的背景色
大家会发现,这三个标签中的文字的高度要小于背景色的高度,而且,这个高度会随着字体大小的变化而变化,而这种变化有没有什么规律可言呢,于是我个分别量了它们的高度,发现第一个的背景色的高度是17px 第二个是22px 第三个是28px,好像没什么规律可言;于是我又试了从字号12px到30px的line-height:
发现没什么规律可言,而且line-height的值不仅随着字号的变化而变化,而且随着字体的变化而变化,所以,我们并找不到它们的规律。
我建议的方法是在写页面之初给line-height设置一个倍数:比如line-height:1.5;
这样就比较好计算了,line-height的倍数是基于字号的,也就是说,font-size:20px;line-height:1.5;那么最终的line-height的值是30px;