height和line-height的区别（简单易懂）

height：指定区域的高度

line-height：一行的高度，简称行高。

行高：两行文字之间基线的距离

1.height和line-height值相同的情况

实例解释：
height定义了一个盒子的高度，这个盒子的背景是浅绿色，当height的值发生变化时，浅绿色的背景也会随之做高度上的变化。

line-height：定义的是每一行的高度，即为输入的内容。

当height和line-height相等时，即盒子的高度和行高一样，内容居中

如图所示：

2.对height进一步理解

看下图：

这里height是两倍line-height，即浅绿色的背景可以接收两行的输入（如果超过两行，内容会溢出于浅绿色背景），如下所示，输入内容占用了第一行，第二行无内容。

3.对line-height进一步理解

如果font-size（文字大小）比line-height（行高）大的话。也就是说文字大，但是行间距小，文字会出现重叠现象。
如图：

4.height>line-height

内容位于中线以上

5.height<line-height

内容位于中线以下

6.特殊情况（height不设置）

height跟随line-height以及文字行数自动变化

当输入两行内容，height根据line-height的值自动变化，变化为line-height的两倍。

height和line-height的区别（简单易懂）相关推荐

C++深拷贝与浅拷贝的区别-简单易懂
C++深拷贝与浅拷贝的区别-简单易懂介绍浅拷贝就比如像引用类型,而深拷贝就比如值类型. 浅拷贝是指源对象与拷贝对象共用一份实体,仅仅是引用的变量不同(名称不同).对其中任何一个对象的改动都会影响另 ...
[css] css的height:100%和height:inherit之间有什么区别呢？
[css] css的height:100%和height:inherit之间有什么区别呢? 上周在微博上无节操吐槽了下inherit的段子,没想到回声还不少: 微博inherit无节操段子不过inh ...
$(window).height() 和 $(document).height()的区别
$(window).height() 和 $(document).height()的区别 $(window).height()代表了当前可见区域的大小, $(document).height()则代表 ...
关于height:100%和height:100vh的区别
关于height:100%和height:100vh的区别 vh就是当前屏幕可见高度的1%,也就是说 height:100vh == height:100%; 但是当元素没有内容时候,设置height ...
html div 高度100,深入理解CSS的height:100%和height:inherit之间的使用区别
inherit确实是个好东西,不仅节约代码,尤其与background之流打交道:而且还利于维护. 注意,如果想要继承background的图片,不能这样缩写,会显得很天真: CSS Code复制内容 ...
一、css清除浮动方法学习笔记总结（超详细，简单易懂）
** css清除浮动方法学习笔记总结(超详细,简单易懂) ** 问题: 上图中,由于container(父级元素)未设置高度,其内部子元素设置了float浮动,导致与container同级(也就是co ...
图片放大镜详细教程（简单易懂、注释清晰明了）
一.详细介绍 (1)放大镜的基本要领如下: 1.原图宽高比例=缩略图宽高比=放大镜的宽高比 2.大放大镜与小放大镜的倍数=原图与缩略图的倍数 3.默认两个放大镜与图片都是左上角重叠 4.原图相对于小放 ...
CodeBlocks配色方案设置（简单易懂）
CodeBlocks配色方案设置(简单易懂) 最终成品方法 1.首先进入codeblocks官网找到colour theme代码. 直接点链接: codeblock wiki 从以上截图往下 ...
【转】区块链是什么，如何简单易懂地介绍区块链？
作者:知乎用户链接:https://www.zhihu.com/question/37290469 来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 友情提醒:比特币 ...
CSS中height:100vh和height:100%的区别是什么？
CSS中height:100vh和height:100%的区别首先,我们得知道1vh它表示的是当前屏幕可见高度的1/100,而1%它表示的是父元素长或者宽的1%(可以这么理解?) 1.对于设置hei ...