LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

[转帖]height和line-height的区别(简单易懂)

liguoquan
2023年7月15日 15:6 本文热度 406
: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的两倍。
在这里插入图片描述


该文章在 2023/7/15 15:06:19 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved