css line height无效,为什么设置span的line-height属性无效?

2023-11-16

bVJ6LH?w=358&h=105

bVJ6LK?w=278&h=275

不知道为什么span 中line-height设置大小小于18px的话都是无效的

18之后才看到效果,不知道是怎么回事求大佬解答一下

http://codepen.io/1206189299/…

直接给答案:

span

设置

display:inline-block;

原理

请参看这篇文章,解释了 什么是 Block box、Line box。

但是里面没有讲清楚为什么不能小于18px。这里有个解释 Height of an inline box

But using a font-size value of 15px doesn’t mean that the tallest glyph will be 15px tall too. That depends on the font. This is somewhat analogous to normal, the initial value of line-height, which is defined as

Tells user agents to set the used value to a “reasonable” value based on the font of the element[…]. We recommend a used value for ‘normal’ between 1.0 to 1.2.

That means that, if you use font-size: 15px, a “reasonable” line-height would be between 15px and 18px. In the “Verdana” font, Firefox thinks the best is 18px; in the “sans-serif”, it uses 17px.

line-height这个东西确实不好回答,我猜这个东西和你字体设置大小有关系。

引用MDN:

对于块级元素,CSS属性line-height指定了元素内部line-boxes的最小高度。

对于非替代行内元素,line-height用于计算line box的高度。

加上

display: block;

是行内元素,用line-heigh需要把变成块状元素用。加上楼上说的display: block;

3431402c1bcafac7e7cfb291f3f55629.png

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

css line height无效,为什么设置span的line-height属性无效? 的相关文章

随机推荐

  • 手机android端安装配置cpolar内网穿透

    cpolar作为一款强大的内网穿透工具 能够在不同操作系统平台中得到应用 真正打通了不同操作系统之间的围墙 让我们能方便的从一个操作平台中 读取到另一个操作平台中的数据 甚至对另一操作平台中运行的程序进行调试 今天 我们就为大家介绍 如何在
  • .Net Core缓存及问题规避

    目录 一 什么是缓存 二 客户端响应缓存 三 服务器端响应缓存 四 内存缓存 五 缓存穿透问题的规避 六 缓存雪崩问题的规避 七 缓存数据混乱的规避 八 分布式缓存 九 缓存方式的选择 一 什么是缓存 缓存是系统优化中简单又以有效的工具 只
  • 【C语言】小知识点

    Hello 各位小伙伴们 大家好啊 又和大家见面了 本期我会讲一点C语言的一些小知识点 希望大家可以学到有用的知识点哦 文章目录 Hello 各位小伙伴们 大家好啊 又和大家见面了 本期我会讲一点C语言的一些小知识点 希望大家可以学到有用的
  • "VT-x is disabled in BIOS"的解决办法

    当创建模拟器的时候发生了如下图的问题 解决办法 1 重启电脑 2 按F2进入BIOS 3 找到 Intel Virtual Technology 他这时会显示disable 按Enter把他改成enable即可 当时我在网页上寻找帮助时 好
  • 【华为OD机试真题】最左侧冗余覆盖子串(C++&java&python)100%通过率 超详细代码注释 代码优化

    华为OD机试真题 2022 2023 真题目录 点这里 华为OD机试真题 信号发射和接收 试读 点这里 华为OD机试真题 租车骑绿道 试读 点这里 最左侧冗余覆盖子串 知识点滑窗 时间限制 1s 空间限制 256MB 限定语言 不限 题目描
  • TinyML构建卷积神经网络(CNN)模型声控Arduino机器车

    本教程介绍了如何将机器学习与 Arduino 结合使用 在微控制器上运行由TinyML构建的机器学习语音识别模型 控制Arduino机器车运行 要构建这个项目 至少有两个步骤 训练一个新的机器学习模型并使其适应在 Arduino 上运行 使
  • visio连接线和框图不好控制总跑跳问题

    方法1 视图点右下角小箭头 点开后在常规一栏把对齐和粘附的勾去掉就可以了 方法2 点开始 在连接线旁边有个 X 号 点击X号后按ctrl就可以用鼠标在任意地方设置连接点
  • replace()和replaceAll()的区别

    replace char oldChar char newChar 返回一个新的字符串 它是通过用 newChar 替换此字符串中出现的所有 oldChar 而生成的 参数是字符串也成立 eg str replace 20 用 20 替换空
  • 狂神说SpringMVC 最全学习笔记

    SpringMVC 1 回顾MVC 1 1 什么是MVC MVC是模型 Model 视图 Views 控制器 Controller 得缩写 是一种软件设计规范 是将业务逻辑 数据 显示分离得方法组织代码 MVC主要作用是降低了视图与业务逻辑
  • npm run dev,npm run serve 运行到一半卡死

    Vue npm run dev npm run serve 运行到一半卡死 有两个原因会造成这个结果 modules中缺少依赖 使用npm install 命令重新加载依赖 Vue规定每个template中必须有一个根div 如果有两个di
  • 【雕爷学编程】Arduino 手册之比较运算符的成员运算符和非成员运算符

    什么是Arduino Arduino 是一款开源的电子原型平台 它可以让你用简单的硬件和软件来创建各种创意的项目 无论你是初学者还是专家 Arduino 都能为你提供无限的可能性 你可以用 Arduino 来控制传感器 灯光 马达 机器人
  • Qt学习11:Dialog对话框操作总结

    文章首发于我的个人博客 欢迎大佬们来逛逛 完整Qt学习项目地址 源码地址 文章目录 QDialog QDialogButtonBox QMessageBox QFileDialog QFontDialog QColorDialog QInp
  • smardaten实战丨谁说无代码不能开发出漂亮的门户首页?

    一 需求背景 门户首页对于一个公司或组织来说是一个极其重要的网站页面 它可以作为访问者了解和获取相关信息的入口 同时也是展示品牌形象和吸引目标受众的重要工具 开发一个门户首页需要开发团队在向访问者展示关于公司或组织基本信息的基础上 使用多种
  • 【B类比赛】 第十一届蓝桥杯 省国赛经历

    Now 拿起键盘写下这段话的时候 已经是第12届蓝桥杯省赛前的一天了 2021 4 17 距离上次蓝桥杯省赛正好6个月了 如今的我仍在ACM里 这半年经历了挺多事情 退ACM已经势在必行 且行且珍惜吧 未来的我将会接触一些新的领域 在算法之
  • 进程间通信之共享内存分析

    零拷贝技术 https strikefreedom top linux io and zero copy 一 内存映射和共享内存的区别 1 1 内存映射之mmap函数 将一个文件或者其它对象映射到进程的地址空间 实现文件磁盘地址和进程虚拟地
  • iView中Form表单的验证(自定义验证、动态增减项验证)

    记录 iView中Form表单的验证 自定义验证 动态增减项验证
  • java.sql.SQLException: Network error IOException: Connection refused

    发生原因的问题是 数据库从服务器换到本地 项目启动就报错 1 程序和功能 启用或关闭Windows功能 2 Telnet客户端打个勾 3 win R cmd 输入 services msc 找到SQL SERVER的服务 重启一下 4 重启
  • SQLserver2008 R2连接服务器异常(error:26-定位指定的服务器/实例时出错)

    SQLserver2008 R2连接服务器异常 error 26 定位指定的服务器 实例时出错 笔者的系统环境 Windows7旗舰版安装VMware workstations pro后在Windows8 1专业版操作系统上安装SQLser
  • C语言实现抽签小功能

    相信大家都玩过微信小程序抽签的经历 现在我们就用C语言实现简单的抽签函数 简单方便 思考难度不大 各位试试吧 include
  • css line height无效,为什么设置span的line-height属性无效?

    不知道为什么span 中line height设置大小小于18px的话都是无效的 18之后才看到效果 不知道是怎么回事求大佬解答一下 http codepen io 1206189299 直接给答案 给 span 设置 display in