line-height:1的存在意义是什么(v1)

news2025/2/6 0:54:35

一、line-height:1的存在意义是什么(v1)

1. 加不加这段代码的区别是什么?

示例代码

<!DOCTYPE html>
<html lang="en">
<style>
    p{line-height:1;} /* 随时注释的line-height:1 */

    p{margin:0;background-color:#f5f5f5;border-bottom:solid 1px #ccc}
    p:nth-child(1){font-size:12px;}
    p:nth-child(2){font-size:14px;}
    p:nth-child(3){font-size:16px;}
    p:nth-child(4){font-size:18px;}
    p:nth-child(5){font-size:20px;}
</style>
<body>
    <p>12</p>
    <p>14</p>
    <p>16</p>
    <p>18</p>
    <p>20</p>
</body>
</html>

不加的情况下如下:
在这里插入图片描述
加上的情况:
在这里插入图片描述
明显的,我们可以看出它们的高度产生了变化。

也可以说文字上下的空白区域减少了,更贴合字体了。

2. 这样做的主要目的是什么?

这样做的主要目的是为了高保真还原设计图,在特意提及并有需求的情况下,部分的UI设计图要求精准控制展示效果,字体的高度是被严格控制的。

字体行高需要紧贴字体的情况下,可以使用line-height:1,或者line-height:100%。它们两个的效果是一样的。


二、参考

https://developer.mozilla.org/zh-CN/docs/Web/CSS/line-height

https://blog.51cto.com/u_15302032/5069527

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/103040.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

《罗马革命》豆瓣 9.1 从恺撒大帝到屋大维

《罗马革命》 关于作者 本书的作者罗纳德•塞姆&#xff0c;是英国牛津大学古罗马历史教授&#xff0c;被誉为20世纪西方世界最出色的罗马史学家。 关于本书 本书的作者抛弃了古罗马史家的论述&#xff0c;从政治史研究的角度&#xff0c;观察罗马革命的前因后果&#xff0c…

Java——记录BigDecimal与0比较的一个坑

文章目录前言问题解决问题解决前言 在之前做的一个项目中&#xff0c;为了保证BigDecimal在除数 divide时&#xff0c;如果被除数为0&#xff0c;出现java.lang.ArithmeticException: / by zero 报错问题&#xff0c;写了一个对比。具体代码如下&#xff1a; public static B…

Promise(一) 介绍及基本使用+API

目录 1.Promise 的理解和使用 1.1. Promise 是什么? 1.1.1. 理解 1.2. 为什么要用 Promise? 1.2.1. 指定回调函数的方式更加灵活 1.2.2. 支持链式调用, 可以解决回调地狱问题 1.3 promise初体验 1.4 Promise实践练习——fs读取文件 1.5 Promise实践练习——Ajax请求…

论文精讲 | 一种隐私保护边云协同训练

作者&#xff1a;王森、王鹏、姚信、崔金凯、胡钦涛、陈仁海、张弓 &#xff5c;单位&#xff1a;2012实验室理论部 论文标题 MistNet: Towards Private Neural Network Training with Local Differential Privacy 论文链接 https://github.com/TL-System/plato/blob/main/…

安装MYSQL 社区版 mysql 8.0.30

https://dev.mysql.com/downloads/ 上面地址下载 安装社区版&#xff0c;选择开发者选项 mysql社区版 8.0.30&#xff0c; 直接都下一步&#xff0c;下一步的安装 安装进度一直在显示 安装完成&#xff0c; 下一步 开发者 输入密码&#xff1a; 增加用户 sa 又是一番执行 …

Effective C++(一):让自己习惯C++

个人读书记录&#xff0c;不适用教学内容。 目录 条款01&#xff1a;视C为一个语言联邦 条款02&#xff1a;尽量以const&#xff0c;enum&#xff0c;inline替换#define 条款03&#xff1a;尽可能使用const 所谓的"顶层const"和"底层const" const返回…

微服务框架 SpringCloud微服务架构 微服务面试篇 54 微服务篇 54.7 Sentinel的线程隔离与Hystix的线程隔离有什么差别

微服务框架 【SpringCloudRabbitMQDockerRedis搜索分布式&#xff0c;系统详解springcloud微服务技术栈课程|黑马程序员Java微服务】 微服务面试篇 文章目录微服务框架微服务面试篇54 微服务篇54.7 Sentinel的线程隔离与Hystix的线程隔离有什么差别?54.7.1 Sentinel与Hystix…

计算机毕设Python+Vue学生社团管理(程序+LW+部署)

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

基于蓝牙AOA技术的智慧医疗解决方案

1. 应用背景 医院需求分析在医疗体制不断完善的今天&#xff0c;医院的信息化程度已经大大提高&#xff0c;现在的大型医院都已经用上了医院信息系统(HIS)&#xff0c;它是医院管理同现代软件技术、网络技术相结合的产物。应用HIS系统后&#xff0c;确实方便了群众就医&#x…

【docker】DockerFile

一、DockerFile dockerfile是用来构建docker镜像的文件&#xff01;命令参数脚本&#xff01; 构建步骤&#xff1a; 编写一个dockerfile文件docker build构建成为一个镜像docker run 运行镜像docker push 发布镜像&#xff08;DickerHub 阿里云镜像仓库&#xff01;&#x…

【Python机器学习】分类算法任务、分类模型评价指标详解(图文解释)

分类任务 设样本集S{s_1,s_2,…,s_m}包含m个样本&#xff0c;样本s_i(x_i,y_i)包括一个实例x_i和一个标签y_i&#xff0c;实例由n维特征向量表示&#xff0c;即x_i(x_i^(1),x_i^(2),…,x_i^(n))。 在学习过程&#xff0c;分类任务将样本集中的知识提炼出来&#xff0c;形成模…

进程程序替换

文章目录进程程序替换是什么概念原理为什么要进行程序替换如何进行程序替换使用接口execl引入进程创建execvexeclpexecvpexecle进程程序替换是什么 概念 通过之前的学习&#xff0c;我们知道子进程执行的是父进程的代码片段。 如果我们想让创建出来的子进程&#xff0c;执行的…

PPT丑哭了?这个工具做报表上手更简单,效果更酷炫,送40套模板

如果2023年你还做着万年不变的饼图、折线图&#xff0c;你将会再次错失涨薪的机会&#xff01; 数据有多重要&#xff0c;已经不言而喻&#xff0c;随之而来的是职场对数据分析与展示能力的要求也越来越高。 但是你是不是这种情况&#xff1f;一用图表就只会用饼图、折线图&a…

ice.js 3 的体验优化策略介绍

ice.js 3 已经正式发布&#xff0c;期待更多的业务来使用、验证&#xff0c;一起建设更好的用户体验。ice.js 3 地址&#xff1a;https://v3.ice.work/本文将简单介绍 ice.js 3 中已经落地和正在进行的一些体验优化策略&#xff0c;以供探讨。Chrome 在去年成立了一个名为 Auro…

Allegro如何导出光绘和颜色设置到其它单板上操作指导

Allegro如何导出光绘和颜色设置到其它单板上操作指导 Allegro有个非常强大的功能,支持把光绘设置和颜色设置等等参数从一个PCB导入到另外一块PCB中,如下图 具体操作如下 导出参数设置,file-export选择Parameters

优优绿能冲刺创业板:年营收4.3亿估值25亿 小米是股东

雷递网 雷建平 12月19日深圳市优优绿能股份有限公司&#xff08;简称&#xff1a;“优优绿能”&#xff09;日前递交招股书&#xff0c;准备在深交所创业板上市。优优绿能计划募资7亿元&#xff0c;其中&#xff0c;2.7亿元用于深圳市优优绿能股份有限公司充电模块生产基地建设…

[附源码]计算机毕业设计Python二次元信息分享平台的设计及实现(程序+源码+LW文档)

该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程 项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等…

数商云采购管理系统支付结算功能详解,实现建筑工程企业采购业务智能化管理

建筑工程行业企业过去受技术、场地等限制&#xff0c;一直采用传统的采购方式&#xff0c;再加上整个行业内部信息相对割裂、采购面临层层传播、中间沟通亦面临多层税费等问题&#xff0c;为建筑工程采购工作增添了不少困难。随着互联网时代的发展&#xff0c;在大数据、云计算…

云原生之使用Docker部署Dashdot服务器仪表盘

云原生之使用Docker部署Dashdot服务器仪表盘一、Dashdot介绍二、检查本地系统环境1.检查本地系统版本2.检查docker状态3.检查docker版本三、下载Dashdot镜像四、部署Dashdot应用1.创建安装目录2.创建Dashdot容器3.查看Dashdot容器状态五、访问Dashdot一、Dashdot介绍 Dashdot是…

未来十年,Python将如何发展?

随着人工智能的发展和普及&#xff0c;作为人工智能首选语言的Python&#xff0c;也越来越受到大家的欢迎。可能也有很多同学想知道未来十年&#xff0c;Python会有什么样的发展。如果发展得非常好&#xff0c;就值得我们亲自去机构进行考察试学&#xff0c;值得我们花时间、花…