为了账号安全,请及时绑定邮箱和手机立即绑定

关于line-height和font-size

A . line-height: 顾名思义,行高(行间距),指在文本中,行与行之间的 基线间的距离 ),这个点明白。


B . line-height 与 font-size 的计算值之差,在 CSS 中成为“行间距”。分为两半,分别加到一个文本行内容的顶部和底部。


提问:1、line-height 与 font-size 的计算值之差,这个计算值之差是什么?


2、【在CSS中成为“行间距”】中的“行间距”应该不是line-height行间距的意思吧,所以这个“行间距”是什么意思?


正在回答

2 回答

https://img1.sycdn.imooc.com//5c84c92f0001720605060243.jpg

橙色表示行高,行与行之间的基线间的距离。

当文字不是在撑满整个行高的情况下,假设橙色的行高的高度是10px,而文字的高度只有6px。

那么【行间距】= line-height - font-size = 10px - 6px = 4px

然后这4px分为两半,分别加到文本的顶部和底部,也就是各自2px的高度。如图中蓝色所示。

总结:

1、【计算值之差】就是line-height减去font-size

2、【行间距】就是计算值之差分别加到文本顶部、底部的内容


个人理解,不到位的地方还请指教。

31 回复 有任何疑惑可以回复我~
#1

慕容818178 提问者

好滴谢谢哦
2019-03-10 回复 有任何疑惑可以回复我~
#2

LouisDuan

nice
2019-03-11 回复 有任何疑惑可以回复我~
#3

qq_慕仔5019791

那这里height的设置是以什么为基准的呢?有没有top、bottom等值呢?能不能也想这样解释一下呢?
2019-07-21 回复 有任何疑惑可以回复我~
#4

qq_慕仔5019791

如果行高设置的跟height一样的话,那不是文本不应该在行高高度的一半的位置吗?求问!
2019-07-21 回复 有任何疑惑可以回复我~
查看1条回复

nice

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

关于line-height和font-size

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信