line-height的使用场景

line-height:字面含义为行高,行高有三部分组成,分为内容高度,上间距,下间距。
在这里插入图片描述
可以看到文本在div盒子中的默认位置是左上角。此时文字部分的行高只有内容高度在支撑,上间距和下间距都是0。鼠标在字体上滑动时的蓝色部分就是此时span元素包裹的文本的行高(和span元素的背景色尺寸相同)。
在这里插入图片描述
在这里插入图片描述

当给span中的lline-height属性设置为300px时; line-height的值默认为normal,即文本默认从左上角开始显示。

span {....line-height: 300px; 
}

此时,刷新可以看到,蓝色部分的高度占据盒子的整个高度。蓝色部分即此时的文本的行高。
在这里插入图片描述
当行高line-height的大小设置等于父级元素的高度(此处是300px)时。此时 line-height的值 减去 文本内容高度后,剩余的大小,上下间距均分,刚好填满父级元素盒子的整个高度,所以就实现了文本的垂直方向上居中显示的效果了。
在这里插入图片描述

当 line-height 小于 父级元素高度时,比如把line-height设置为200px,如下,文本在盒子的中线上方显示。
在这里插入图片描述

当 line-height 小于 父级元素高度时,比如把line-height设置为400px,如下,文本在盒子的中线下方显示。
在这里插入图片描述
在这里插入图片描述

上图可以看到当行高设置的比父元素盒子还要高时,那么文本的下间距就会溢出到盒子外部去了。但是行高依然存在。行高太大,文字有可能会在盒子的外边下方。
总结:只要line-height不按默认值normal设置。那么文本的上下间距的大小都是 line-height减去文本内容高度,然后剩余部分上下间距均分。
注意:line-height 只针对单行文本,实现垂直居中显示生效。在p,span等文本元素上设置生效,在img元素上设置无效。

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

超融合/分布式 IT 架构有哪些常见故障类型?如何针对性解决和预防?

本文刊于《中国金融电脑》2024 年第 7 期。 作者:SmartX 金融团队 以超融合为代表的分布式 IT 基础架构凭借其高性能、高可靠和灵活的扩展能力,在满足大规模、高并发、低延迟业务需求等方面展现出显著优势,成为众多金融机构构建 IT 基础设施…

初识模版(C++)

初识模版(C) 模版是C的一个重大发明,是让C突飞猛进的原因之一。 泛型编程 实现一个通用的交换函数? void Swap(int& left, int& right) {int temp left;left right;right temp; }void Swap(double& left, doubl…

DockerHub解决镜像拉取之困

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:Linux运维老纪的首页…

从零开始搭建Aliyun ESC高可用集群 (HaVip+KeepAlived)

从零开始搭建Aliyun ESC高可用集群 (HaVip+KeepAlived) 架构 架构 本设计方案采用两台阿里云ECS服务器搭建Keepalived结合LVS的高可用集群。使用LVS的TUN模式进行负载均衡,同时利用阿里云的弹性IP(EIP)与高可用虚拟HaVIP实现跨服务器的高可用性。架构中,一台ECS服务器作为…

DFS 算法:记忆化搜索

我的个人主页 {\large \mathsf{{\color{Red} 我的个人主页} } } 我的个人主页 往 {\color{Red} {\Huge 往} } 往 期 {\color{Green} {\Huge 期} } 期 文 {\color{Blue} {\Huge 文} } 文 章 {\color{Orange} {\Huge 章}} 章 无 此系列更新频繁,求各位读者点赞 关…

备考计算机二级Python之Day5

第5章 函数和代码 一、函数的基本使用 函数是一段具有特定功能的、可重用的语句组,通过函数名来表示和调用。 函数的使用包括两部分:函数的定义和函数的使用 1、函数的定义 Python语言通过保留字def定义函数,语法形式如下: …

SpringBoot教程(二十四) | SpringBoot集成AOP实现日志记录

SpringBoot教程(二十四) | SpringBoot集成AOP实现日志记录 (一)AOP 概要1. 什么是 AOP ?2. 为什么要用 AOP?3. AOP一般用来干什么?4. AOP 的核心概念 (二)Spring AOP1. 简…

CSS3页面布局-三栏-中栏流动布局

三栏-中栏流动布局 用负外边距实现 实现三栏布局且中栏内容区不固定的核心问题就是处理右栏的定位&#xff0c; 并在中栏内容区大小改变时控制右栏与布局的关系。 控制两个外包装容器的外边距&#xff0c;一个包围三栏&#xff0c;一个包围左栏和中栏。 <!DOCTYPE html&…

vllm 部署GLM4模型进行 Zero-Shot 文本分类实验,让大模型给出分类原因,准确率可提高6%

文章目录 简介数据集实验设置数据集转换模型推理评估 简介 本文记录了使用 vllm 部署 GLM4-9B-Chat 模型进行 Zero-Shot 文本分类的实验过程与结果。通过对 AG_News 数据集的测试&#xff0c;研究发现大模型在直接进行分类时的准确率为 77%。然而&#xff0c;让模型给出分类原…

【软件测试面试题】WEB功能测试(持续更新)

Hi&#xff0c;大家好&#xff0c;我是小码哥。最近很多朋友都在说今年的互联网行情不好&#xff0c;面试很难&#xff0c;不知道怎么复习&#xff0c;我最近总结了一份在软件测试面试中比较常见的WEB功能测试面试面试题合集&#xff0c;希望对大家有帮助。 建议点赞收藏再阅读…

AI学习记录 - 怎么理解 torch 的 nn.Conv2d

有用就点个赞 怎么理解 nn.Conv2d 参数 conv_layer nn.Conv2d(in_channels1, out_channels 10 // 2, kernel_size3, stride2, padding0, biasFalse) in_channels in_channels 可以设置成1&#xff0c;2&#xff0c;3&#xff0c;4等等都可以&#xff0c;一般来说做图像识别…

微服务案例搭建

目录 一、案例搭建 1.数据库表 2.服务模块 二、具体代码实现如下&#xff1a; (1) 首先是大体框架为&#xff1a; &#xff08;2&#xff09;父模块中的pom文件配置 &#xff08;3&#xff09;shop_common模块&#xff0c;这个模块里面只需要配置pom.xml&#xff0c;与实体…

MySQL如何判断一个字段里面是否包含汉字

SQL查询中&#xff0c;length() 和 char_length() 都是用来获取字符串长度的函数 在单字节字符集下&#xff08;如ASCII&#xff09;&#xff1a;每个字符通常占用1个字节&#xff0c;因此length()和char_length()在这类字符集中给出的结果是一样 在多字节字符集下&#xff0…

matplotlib绘制子图以及局部放大效果

需求&#xff1a;绘制1*2的子图&#xff0c;子图1显示两个三角函数&#xff0c;子图2显示三个对数函数&#xff0c;子图2中对指定的区域进行放大。 绘图细节&#xff1a; 每个子图中每个函数的数据存放到一个列表中&#xff0c;然后将每个子图的数据统一存到一个列表中&#…

Go 使用Redis安装、实例和基本操作

Go使用Redis&#xff1a;详解go-redis/v9库 引言 Redis作为一个高性能的键值对数据库&#xff0c;广泛应用于缓存、消息队列、实时数据分析等场景。在Go语言中&#xff0c;go-redis/v9库提供了丰富的接口和高效的数据交互能力&#xff0c;使得在Go项目中集成Redis变得简单而高…

接口限流经典算法

文章目录 限流基于计数器的限流基于滑动窗口的限流桶漏斗算法令牌桶算法 限流 为了保证系统的安全性和稳定性&#xff0c;防止恶意流量和突发大量流量短时间内大量请求接口&#xff0c;造成服务器崩溃&#xff0c;接口的限流是有必要的。 以下是四种经典的限流算法。 基于计数…

Python测试框架Pytest的使用

pytest基础功能 pytset功能及使用示例1.assert断言2.参数化3.运行参数4.生成测试报告5.获取帮助6.控制用例的执行7.多进程运行用例8.通过标记表达式执行用例9.重新运行失败的用例10.setup和teardown函数 pytset功能及使用示例 1.assert断言 借助python的运算符号和关键字实现不…

UE5打包iOS运行查看Crash日志

1、查看Crash 1、通过xCode打开设备 2、选择APP打开最近的日志 3、选择崩溃时间点对应的日志 4、选择对应的工程打开 5、就能看到对应的Crash日志 2、为了防止Crash写代码需要注意 1、UObject在RemoveFromRoot之前先判断是否Root if (SelectedImage && Selecte…

Frog4Shell — FritzFrog 僵尸网络将一日攻击纳入其武器库

FritzFrog 的背景 Akamai 通过我们的全球传感器网络持续监控威胁,包括我们之前发现的威胁。其中包括FritzFrog 僵尸网络(最初于 2020 年发现),这是一个基于 Golang 的复杂点对点僵尸网络,经过编译可同时支持基于 AMD 和 ARM 的机器。该恶意软件得到积极维护,多年来通过增…

百日筑基第六十天-学习一下Tomcat

百日筑基第六十天-学习一下Tomcat 一、Tomcat 顶层架构 Tomcat 中最顶层的容器是 Server&#xff0c;代表着整个服务器&#xff0c;从上图中可以看出&#xff0c;一个 Server可以包含至少一个 Service&#xff0c;用于具体提供服务。Service 主要包含两个部分&#xff1a;Conn…