height和line-height的区别(简单易懂)

height和line-height的区别(简单易懂)height:指定区域的高度line-height:一行的高度,简称行高。行高:两行文字之间基线的距离1.height和line-height值相同的情况当height和line-height相等时,区域中的内容居中(即区域的高度和每一行的高度一样,内容居中)如图所示:内容居中(蓝色部分是选中的部分,有背景的地方是定义的区域),有背景的地方就是区域高度(height),选中的时候蓝色部分的高度即为行高。2.对height进一步理解看下图:这里height是两倍line-heigh

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的两倍。
在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/35029.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注