line-height

做网页的时候有一个疑问,那就是我去量有关于字体的时候该去量到哪里,大家都知道,文字是有默认行高的,我们量元素与字体之间的距离的时候不应该从贴着文字量,或者是贴着文字量出数值以后,应该减去相应地值,那么问题又来了,我到底应该减去多少才是合适准确的呢,于是我做了一个实验:


屏幕快照 2017-09-02 上午10.56.25.png

这是三个p标签,并且没有margin值,分别设置了font-size为12px 16px 20px;并且给不同的背景色
大家会发现,这三个标签中的文字的高度要小于背景色的高度,而且,这个高度会随着字体大小的变化而变化,而这种变化有没有什么规律可言呢,于是我个分别量了它们的高度,发现第一个的背景色的高度是17px 第二个是22px 第三个是28px,好像没什么规律可言;于是我又试了从字号12px到30px的line-height:


P70902-114543.jpg

发现没什么规律可言,而且line-height的值不仅随着字号的变化而变化,而且随着字体的变化而变化,所以,我们并找不到它们的规律。

我建议的方法是在写页面之初给line-height设置一个倍数:比如line-height:1.5;
这样就比较好计算了,line-height的倍数是基于字号的,也就是说,font-size:20px;line-height:1.5;那么最终的line-height的值是30px;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1,行高的定义 行高是指行间的距离,也就是基线之间的距离,而只有两行文字才会存在两个基线,那么为什么单行文字还具有...
    Bennt阅读 1,727评论 2 7
  • 一个空的div盒子, 里面什么都不放,他的高度值为0,;但是在里面放入文字后,div盒子立马就有了高度,怎么就有...
    2016_18点阅读 558评论 0 1
  • 上一篇中提到自己 debug 时遇到一个 css 知识盲点:行高和字体的关系。随后查了相关资料,在这里梳理下这个知...
    唯泥Bernie阅读 3,315评论 0 7
  • 行高和行距 line-height 是用于定于行高的css属性。什么是行高? 从上图可以清楚看到,一行文本对应会有...
    亚历山大猫阅读 1,091评论 0 1
  • 很难,一直以来的感受,人们要表达自己心中的真实想法是很难的一件事,至少对我是这样。 不知道是不是我们的文化里推崇含...
    杨夏阅读 861评论 0 8

友情链接更多精彩内容