别再滥用 line-height 了

准前端工程师 准前端工程师 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 2.4k累计阅读 2.5k平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄15年
关注
原创 最新推荐文章于 2026-09-06 13:57:20 发布 2.4k 阅读 AI 写同款· GEO 优化 ›
vue3 - vite报错TypeError: crypto.hash is not a function（vue3+vite启动运行提示错误，项目无法启动且打包报错失败，详细解决排查方案教程） vue3 vite 报错，vue3+vite启动报错：TypeError: crypto.hash is not a function，创建vue3+vite项目时报错TypeError: crypto.hash is not a function，如何解决这个问题，VUE3+VITE报错crypto.hash，vue3运行报错，vite运行报错，vue3打包报错，vite打包报错，vue3新建项目无法运行，vue3 vite创建项目直接报错了，node版本不兼容，修改了node版本还是不行，依旧报错，一直 阅读详情

1) line-height 不能用在无 inline 元素的 block 元素内;

2) line-height "有继承性", 对 block 元素使用是设定内部 inline 元素的最小高度来的;

3) 不要给 "替换内联元素" 设置 line-height ,这是很不友好的行为(虽然 img 也算替换行内元素,但是给他设置没用,因为人家规范本来就不允许给替换内联元素加这玩意);

根据 MDN 上的 reference 总结,以后有的话还会加上.


收录于
HTML&CSS

当前文章被收录于：

HTML&CSS
16 篇文章 0 人学习
订阅专栏 查看详情
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
WINCC7.3破解文件 WINCC7.3硬件够破解文件，有需要的下载！WINCC7.3硬件够破解文件，有需要的下载！ 立即下载

相关推荐

自动控制原理之控制系统的数学模型（类比神经网络学习数学模型）

控制系统的数学模型背景建模方法常用的数学模型时域数学模型的建立建立微分方程的步骤复数域模型的建立传递函数的性质系统的典型环节及传递函数比例环节惯性环节积分环节微分环节理想微分环节一阶微分环节二阶微分环节振荡环节延时环节（时滞环节） 背景 数学模型就像是真实世界的写照，它就像一个虚拟的世界，我们可以通过建模的方式了解这个真实世界的运作规律。 这一点很像强化学习，强化学习需要一个供智能体探索、学习的环境，于是，我们通常会事先建立一个虚拟的仿真环境。举个例子，对于人类来说，可能需要经过不断地尝试，甚至是生命的代价

zbp_12138的博客 6578

css_行高line-height失效

linear-height要写在font下面，或者不用font复合属性，用font-size、font-style、font-weight、font-family单独设置字体属性。设置line-height与容器高度相等，行内原素垂直不居中。

qq_57226103的博客 617

UE5网络模块实战：属性复制、RPC与联机开发踩坑指南

多人联机开发中，网络同步是核心难题。UE5网络模块以服务器权威为基础，通过Actor复制、RPC和所有权机制实现多端状态一致。理解属性复制与OnRep回调、区分Server/Client/Multicast RPC的适用场景，是构建稳定联机架构的关键。本文结合数字孪生与多端协作场景，探讨如何将渲染与逻辑分离，并针对打包后网络失效、端口防火墙、崩溃排查等工程实践问题给出解决方案。通过蓝图接口解耦表现层，利用C++创建StaticMesh组件实现服务器逻辑与客户端表现分离，同时注意专用服务器不加载渲染依赖（如D

weixin_29010003的博客 272

ie6中line-height失效

在网页设计中，我们常用line-height来设置行间距，可是有时line-height会在IE6中失效，我们设置的行间距没有起到应起的作用。 原因是line-height只针对纯文本，如果内容里有包含img、input、select、textarea、button、object等标记，就造成line-height失效。 解决办法: 可以通过给其中的图片做一个样式表.box img { ...

yushuir的专栏 162

drm 之modes

#define _GNU_SOURCE #include <errno.h> #include <fcntl.h> #include <stdbool.h> #include <stdint.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <sys/mman.h> #include <time.h&...

u012794472的专栏 3718

烽火HG680-LC刷机后体验：当贝纯净桌面+讯飞语音，老盒子秒变智能电视的折腾记录

本文详细记录了烽火HG680-LC机顶盒刷机后的使用体验，通过安装当贝纯净桌面和讯飞语音助手，老盒子焕发新生，实现无广告、快速响应的智能电视功能。文章对比了刷机前后的性能差异，分享了影音播放、语音控制等实用功能，并提供了ADB调试和问题解决的实用技巧，帮助用户将闲置的运营商盒子变身为高性能的智能影音中心。

weixin_30292843的博客 471

line-height属性遇到的问题

最近在学习html+css基础，这两天在编写页面的时候，发现有时候使用line-height属性，会变成行间距变的很大的情况，在这里写下总结，由于电脑系统过于low，有些图片就稍后在附加，进入正题：情况一： 当在一个块中，有一行文字，想要它垂直居中的话，使用我们平常的写法：line-height：20px;就可以达到想要的效果；情况二： 在一个块中，如果是多行...

weixin_34206899的博客 320

WSL2 Ubuntu复现FoundationPose项目(docker)

复现一个基于深度学习的物体姿态估计框架FoundationPose项目，使用docker，WSL2

woaidawangwang的博客 2000

line-height

line-height

seimeii的博客 266

【OpenClaw从入门到精通】第12篇：OpenClaw 2026子代理实战全攻略：用ACP架构搭建多智能体协作网络（附完整代码）

本文聚焦OpenClaw 2026.3.2版本默认启用的ACP（Agent Communication Protocol）子代理机制，从核心概念、底层原理到企业级实操全流程拆解。先解析子代理的定义、ACP协议通信原理及主从代理分工逻辑，再提供环境准备的详细步骤（版本验证、配置调整、技能安装）；随后通过三个递进式虚拟案例（客服分流、智能文档处理、企业级招聘全流程），提供可直接运行的完整代码、执行结果及技术要点解析；最后补充子代理管理运维、性能优化与避坑指南。

专注于人工智能、软件开发、工控自动化、工厂数字化及智能化等领域，希望和大家共同进步！ 2382

10.嵌入式控制器EC实战 GPIO开发流程

文章目录1.General Control Register (GCR)，通用控制寄存器，地址0x1602.GPDRA—GPDRJ端口数据寄存器组(共10组)3.Port Control n Registers (GPCRn, n = A0-I7)，端口控制寄存器4.GPIO端口编程指导编程步骤端口初始化使用InitGPIOReg数据结构初始化所有端口默认工作模式读取输入引脚的值(STATE_ACin())： IT8502中各个引脚的描述见下表所示： 在嵌入式控制器EC的IT8502主控芯片中，通过芯片的

qq_30135687的博客 2285

移动端line-height问题

对一个元素设置line-height=height，可以实现单行文字垂直居中，但是在手机浏览器实现上总是会有所偏差； 据说是手机浏览器对line-height渲染程度不一样，解决方法如下： .class { line-height:normal; padding:10px 0; /*设置成需要的数值*/ }              ...

lyna的博客 1131

PCIe 互联的芯片-- P2P（Peer-to-Peer）

PCIe设备间支持P2P直连通信，但需满足硬件、固件和软件三方面条件。硬件需CPU/芯片组和PCIe交换器支持P2P，BIOS需开启相关设置，操作系统和驱动也要适配。消费级GPU通常禁用此功能，且PCIe P2P性能（128GB/s带宽）远低于NVLink（900GB/s）。常见限制包括ACS阻断、IOMMU隔离和带宽瓶颈。可通过nvidia-smi或NCCL测试验证P2P是否生效。该技术适合异构设备通信，但需注意配置调优。

MHD0815的博客 683

CSS如何定制Bootstrap代码块样式_利用pre标签背景与字体设置

important，优先在自定义 CSS 文件中放在 Bootstrap 引入之后加载检查浏览器开发者工具里，是不是 pre 被套在 <figure> 或 <div class="highlight"> 里——真正需要改的是外层容器的背景，不是 pre 自身字体太细、行高太挤，代码看不清Bootstrap 默认用 font-family: SFMono-Regular, Menlo, Monaco, Consolas，但没设 font-weight，在某些系统上会渲染成极细的 300 字重；

weixin_58606146的博客 264

IMSL CNL 7.0.0 (x86-64)Crack

IMSL CNL 7.0.0 (x86-64)Crack intel的算法库破解文件，这是C++版本的破解文件

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章，有部分习题没有答案，全英文复分析阿尔福斯(Ahlfors) 第三版答案

真正的能理解CSS中的line-height，height与line-height

在最近的项目中，常常用到line-height，只是简单的理解为行高但并没有深层次的理解，致使不能达到信手拈来的感觉。在此做一下总结，一是更深层次的了解什么是line-height，二是比较height与line-height的区别。 基本概念 行高与行距从字面的意思是非常容易理解的，但是对布局和样式来说，我们应该更深入的理解各个属性之间的关系，比如line-height与font-size存在什...

一起的远方的博客 11万+

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

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

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

apple_51491580的博客 2万+

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

对于line-height的认识

在写我对line-height的认识之前，我想每一个人都应该搞清楚下面这个情况。 当给一个空里面添加文字时，这个的高度是怎么来的？ 也许有很多朋友认为是由font-size决定的，但事实上这个元素的高度是由line-height决定的。下面我们可以通过例子来证明一下这个结论。...

张梦莹的博客 5987

line-height的继承性，height line-height 背景填充 的方式

line-height继承性 height 背景填充

JiM-W 的博客 3387

line-height和height的区别

line-heigth是行高的意思，它决定了元素中文本内容的高度，height则是定义元素自身的高度。如：<p>测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本</p>假如定义p标签的行高为line-heigth:20px; 文字在浏览器中显示为一行时，这个p标签的高度会为20px，如果为两行，则p标签的高度为40px;行高20px; 行高变为40px;

CodingAlarm的专栏 1万+

line-height 与 height 的区别

line-height是行高的意思，它决定了元素中文本内容的高度，height则是定义元素自身的高度。 height：表示 行高 line-height：表示 每行文字所占的高度 举例： 第一种情况：使用height 结果： 第二种情况：行高为50px和文字高度为20px情况： 这时候文字会居中显示（对于文字为什么会居中显示问题解释如下：我们...

weixin_30377461的博客 648

CSS 关于line-height详细讲解

带你快速深入认识line-height属性！！！

Q_3603的博客 2780

CSS中的line-height，height与line-height

在最近的项目中，常常用到line-height，只是简单的理解为行高但并没有深层次的理解，致使不能达到信手拈来的感觉。在此做一下总结，一是更深层次的了解什么是line-height，二是比较height与line-height的区别。 基本概念 行高与行距从字面的意思是非常容易理解的，但是对布局和样式来说，我们应该更深入的理解各个属性之间的关系，比如line-height与font-size存在什么关系呢，line-height与所属元素的height又有什么联...

lucky__peng的博客 603

css的font-size属性、line-height属性、height属性

css的font-size属性、line-height属性、height属性

weixin_44992737的博客 3139

line-height与height学习和总结

目录 问题引入 height与line-height是什么？ height与line-height的作用对象是什么？ height与line-height之间存在什么关系？ 必要基本术语和概念 名词 概念 字体 作用的过程 height的作用过程 line-height的作用过程 总结 注： 斜体加粗：在基本术语中有补充 文章中框模型（盒模型）是一回事 问题引入 height与line-height是什么？ height：height 属性设置元素的高度...

qq_31032311的博客 1423

css line-height 用法详解

21212

陆小森_红齐飘飘的博客 2105

line-height的使用方式

line-height line-height 这个属性用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的 inline 元素，它用于计算行盒（line box）的高度。 一、line-height 属性被指定为以下任何一个： /* Keyword value */ line-height: normal; 取决于用户端。桌面...

余光的博客 8388
上一篇： 再说margin
点赞 0
评论 0
书签 书签 0
准前端工程师
准前端工程师
博客等级 码龄15年 17粉丝 27原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值