如图所示，line-height = font-size + 上下本行距。上下半行距总是相等。font-size居于中间。当font-size值固定时，line-height越大，半行距越大。所以当line-height=height时，能实现文字垂直居中。同理，当line-height < height，时。上下半行距变短，故文字底线以下留白部分比顶线高；当line-height > height，上下半行距变高，顶线以上的留白比底线高。

line-height和height关系的更多相关文章

  1. 拉动滚动条追加内容,无限延伸document高度 $(window).scroll(function(){if($(window).scrollTop() + $(window).height() == $(document).height()) { $("body").append(html) } })

    $(document).ready(function() { // endless scrolling $(window).scroll(function() { if($(window).scrol ...

  2. js不需要知道图片宽高的懒加载方法（经过实际测试，不加宽高仍然是无法正常加载的，设置height:auto,height:100%，仍然显示高度为0）

    js不需要知道图片宽高的懒加载方法 懒加载是如何实现的? - 简书https://www.jianshu.com/p/e86c61468285找到一个不需要知道图片宽高的懒加载方法了(经过实际测试,不 ...

  3. $(window).scrollTop() == $(document).height() - $(window).height()（底端）

    jQuery(window).height()代表了当前可见区域的大小,而jQuery(document).height()则代表了整个文档的高度,可视具体情况使用. 注意当浏览器窗口大小改变时(如最 ...

  4. 锋利的jQuery-3--css("height")和.height()的区别

    $("p").css("height") : 获取的高度值与样式的设置有关,可能会得到“auto”, 也可能是字符串“10px”之类的.设置值时如果是数值形式默 ...

  5. obj.offsetHeight与obj.style.height $(obj).height()与$(obj).css('height')

    相同:都可以获取obj的高度区别:(1)obj.offsetHeight可以获取外部.内嵌和内联中定义的高,而obj.style.height只能获取内联中定义的高:(2)obj.offsetHeig ...

  6. jQuery,javascript获得网页的高度和宽度$(document).height / $(window).height

    一.javascript 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: documen ...

  7. 如何理解VB窗体中的scale类属性及width height属性之间的关系

    如何理解VB窗体中的scale类属性及width height属性之间的关系 VB中的SCALEHIEGT,SCALEWIDTH,与窗体中的WIDTH,HEIGHT的区别及关系是许多VB初学者难以理解 ...

  8. ABCpdf.NET中Rect，Bottom，Height的关系

    因为项目需要新功能,要在一个图片的上下加上固定高度的白边如下图.项目中一直使用ABCpdf.NET处理图片,但我一直没有做这方面的功能,所以找来API参考做. 这个简单需求做的过程中出现了一些曲折,主 ...

  9. jquery height、innerHeight、outHeight

    JQuery有很多的height,不总结一下你就要被他搞晕,所以为了保持清醒,汇总在下面 height:height innerHeight:height+padding outerHeight(fa ...

  10. css中height 100vh的应用场景，动态高度百分比布局，浏览器视区大小单位

    css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位 height:100vh 一些只能vw, vh才能完成的应用场景: 1. 场景之:元素的尺寸限制 vw vh 主要是 ...

随机推荐

  1. 面试问题之C++语言：多态

    什么是多态? 概念:同一操作作用于不同的对象,可以有不同的解释,产生不同的执行结果,这就是多态性.简单的说,就是用基类的引用指向子类的对象. 为什么要用多态呢? 原因:封装可以隐藏实现细节,使得代码模 ...

  2. 什么是 Spring 配置文件？

    Spring 配置文件是 XML 文件.该文件主要包含类信息.它描述了这些类是如何 配置以及相互引入的.但是,XML 配置文件冗长且更加干净.如果没有正确规划 和编写,那么在大项目中管理变得非常困难.

  3. scrapy--使用案例

    1.scrapy框架 1.1 安装scrapy pip3 install wheel 下载twisted http://www.lfd.uci.edu/~gohlke/pythonlibs/#twis ...

  4. freemarker与vue使用图片路径获取问题，可双单引号一起使用则可

    <el-table :data="leftPage.datas" style="width: 100%"  @selection-change=" ...

  5. 微信小程序：自定义组件的数据传递

    一.前言 如果小程序中有可复用的UI且具有一定的功能性,就可以使用自定义组件将其封装起来.下面介绍一个简单的组件和一个复杂的组件. 二.简单的组件(计数器) 1. 组件功能介绍 这个组件常见于外卖软件 ...

  6. Restful-API和传统API的对比

    阮一峰 RestFul-API 详解链接:  http://www.ruanyifeng.com/blog/2014/05/restful_api.html 举例,传统api设计: 举例,RestFu ...

  7. 微信小程序命名规则

    目录分析 src是主要的开发目录,各个文件实现功能如下所示: ├─.idea │ └─libraries ├─.temp ├─config └─src ├─assets │ └─images ├─co ...

  8. 利用css3渐变效果实现圆环旋转效果

    * { margin: 0; padding: 0; } .stage { width: 200px; height: 130px; margin: 100px auto; position: rel ...

  9. 搭建MySQL集群-注意版本

    系统环境采样(来自其他机器,直接copy过来的,在安装的机器上,按照步骤查看即可,当然这些还不够实际,后续补充) 检查系统内是否有其他mysql rpm -qa | grep mysql 是否存在my ...

  10. 在线操作word和在线预览查找的资料记录

    在线操作word和在线预览查找的资料记录 在线操作word查找的资料记录 富文本操作 http://fex.baidu.com/ueditor/ 控件类 通过 js 调用控件操作 word 文档 1. ...