首页 > Web开发 > 详细

CSS中的line-height

时间:2017-04-02 14:38:27      阅读:171      评论:0      收藏:0      [点我收藏+]

基本概念

行高、行距

行高是指文本行基线间的垂直距离。那什么是基线呢?记不记得vertical-align属性有个baseline值,这个baseline就是基线。

技术分享

注意:倒数第二根才是基线(baseline),最下面那根是底线(bottom)。

行高(line-height):图中两条红线之间的距离,
行距(Leading):上一行的底线和下一行的顶线之间的距离,
font-size:同一行顶线和底线之间的距离,行距的一半是半行距,

半行距、font-size、line-height之间的关系看图片的右下角就一目了然了~

半行距 = (line-height - font-size)/2    ==>    行距 = (line-height - font-size)

当然,半行距也可能为负值(当line-height < font-size),这时候两行之间就会重叠,如下图所示:

 技术分享

 

CSS中的line-height

原文:http://www.cnblogs.com/echo1937/p/6658857.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!