line-height会影响下方块元素

已于 2023-03-10 10:05:53 修改
阅读量133 收藏
点赞数
分类专栏： 前端学习 文章标签： html Powered by 金山文档
于 2023-03-08 16:56:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yahuoo_/article/details/129406900
版权

在操作时发现一行li的最后一块li总是对不齐，检查发现是上方line-height的原因，奇怪的是左边同样的布局，li由没有受到影响，这是为什么呢？

上方的“换一批”为了让文字居中设置了line-height: 40px，下面的li 就对不齐了

这是左边

全局是这样的

后面调来调去又好了，可能是因为字体图标和行高的问题

yahuoo_
关注
专栏目录
line-height 的特殊性？
liuhao9999的博客
03-23 334
（1）对于非替换元素的纯内联元素，其可视高度完全由line-height决定。对于文本这样的纯内联元素，line-height就是高 度计算的基石，用专业说法就是指定了用来计算行框盒子高度的基础高度。 （2）内联元素的高度由固定高度和不固定高度组成，这个不固定的部分就是这里的“行距”。换句话说，line-height之所以起作 用，就是通过改变“行距”来实现的。在CSS中，“行距”分散在当前文字的上方和下方，也就是即使是第一行文字，其上方也是 有“行距”的，只不过这个“行距”的高度仅仅是完整“行距”高度的
css line-height概念与举例
u012693479的博客
08-22 532
定义 两行文字基线之间的距离。 基线的大体位置 基线的位置可以看成x字母下边缘的位置。 不同字体的基线位置会有微小的差别。 文本中的几条线： 行高示意图： 一行文本的行高为：上间距 + 文本的高度+下间距，并且上间距是等于下间距的。 我们还可以基本上这样认为：行高是两行文字基线之间的距离，也是两行文字顶线之间的距离，两行文字中线之间的距离。 行内框盒子模型 内容区...
fontsize与line-height关系
m0_60909419的博客
12-25 2346
注意2：比如有个父盒子div或者p，他是已经有默认的字体格式和字体大小16px了（除非你自己设置字体或者字体大小或者行高），又因为每一个子元素都会继承字体的属性，这意味着什么，意味着父盒子中的每一行的line-height已经确定了（除非你自己去修改子元素的字体属性），例如给父盒子p设置font-size为20px，那他的行高可能为20*1.3=26px，此时你给子元素设置其他的字体格式或者字体大小，那可能会出现这个子元素行高还没父元素高。区域，但不会增加内容区域高度（甚至是line-box高度）。
CSS line-height概念与举例
HangMine的博客
05-24 641
定义 两行文字基线之间的距离。 基线的大体位置 基线的位置可以看成x字母下边缘的位置。 不同字体的基线位置会有微小的差别。 文本中的几条线： 行高示意图： 一行文本的行高为：上间距 + 文本的高度+下间距，并且上间距是等于下间距的。 我们还可以基本上这样认为：行高是两行文字基线之间的距离，也是两行文字顶线之间的距离，两行文字中线之间的距离。 行内框盒子模型 内容区域 c...
css中的line-height小知识
charlene0824的博客
12-08 1545
本文内容是根据张鑫旭老师视频课程内容编写的 line-height定义了该元素中基线之间的最小距离而不是最大距离。 line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。 所有内联元素的表现斗鱼行内框盒子模型有关 行内框盒子模型包含4种盒子 （1）内容
line-height,vertical-align,margin,padding对行框高度的影响
u010250808的博客
10-29 1115
line-height,vertical-align,margin,padding对行框高度的影响我们知道，在行内布局中，每行的一个或多个行内元素组成行框，行框是包含改行出现的行内框的最高点和最低点的最小框。只要确定了每个行内框的高度以及摆放位置，即确定了行框的高度。行内元素的摆放位置行内元素的摆放位置与vertical-align有着密不可分的关系，默认情况下，vertical-align的值是b
浅谈line-height和vertical-align
weixin_33759269的博客
06-14 625
本文原创：liruifang 作为一个前端人，经常混迹于图片和文字相互糅杂的江湖中，稍有不慎便会中招，本文主要从line-height和vertical-align入手，分析项目中出现的“诡异”现象，透过现象看本质，从而化敌为友为我所用。 目录 问题现象 属性介绍 问题剖析 简单应用 参考文献 一、令人抓狂的现象 1. 单行文本占据的高度 <style type="text/css"...
CSS line-height概念与举例 单行多行文本垂直居中
u010227042的博客
11-01 1501
本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/37 定义 两行文字基线之间的距离。 基线的大体位置 基线的位置可以看成x字母下边缘的位置。 不同字体的基线位置会有微小的差别。 文本中的几条线： 行高示意图： 一行文本的行高为：上间距 + 文本的高度+下间距，并且上间距是等于下间距的。 ...
line-height与vertical-align
weixin_30522095的博客
05-09 153
一、line-height 1.line-height line-height行高是指文本行基线之间的距离。 line-height不用于块级元素，当对块级元素设置行高时，只会对其中的行内子元素产生影响。在应用到块级元素时，line-height定义了元素文本基线之间的最小距离，即最小行高。 如果块级元素中的某一个子级内联元素设置的行高比最小行高大，则行框以设置行高来渲染；如果小...
leading-trim:在文本块的第一行和最后一行的上方和下方去除空格
05-02
默认情况下，文本元素包括基于其line-height值的垂直空间。 多余空间的影响可能会被忽略或解决，但是当使用精确的比例尺和布局组件时，可能没有空间在文本周围形成随机间距。 Leading leading-trim是ThreeShapes的...
CSS | line-height 与 vertical-align详解
MGsniper的博客
02-13 531
本文将依据W3C官方文档，对IFC下的line-height与vertical-align属性进行详尽的解析。
vertical-align属性解决元素间有间隙和对不齐问题--小技巧
JackieDYH的博客
02-19 1384
vertical-align属性： 设置元素的垂直对齐方式 vertical-align: baseline; 将元素放在父元素的基线上 默认值 vertical-align: top; 顶端对齐 vertical-align: middle; 中部对齐 vertical-align: bottom; 底部对齐 vertical-align: s...
前端开发笔记--html 黑马程序员2
m0_73805171的博客
10-08 552
路径分为绝对路径和相对路径。
使用HTML、CSS和JavaScript创建图像缩放功能
最新发布
2301_79858914的博客
10-13 235
通过以上步骤，我们成功创建了一个简单的图像缩放功能。用户只需点击图像，就能查看更大的版本，提升了网站的互动性和用户体验。希望你能在自己的项目中实现这个功能，欢迎分享你的经验和想法！你可以根据需要进一步修改或添加细节。
使用html写一个能发起请求的登录界面
2301_79431343的博客
10-03 1437
这是文档类型声明，告诉浏览器这是一个 HTML文档。这是 HTML 文档的根元素，lang="en" 表明文档的主要语言是英语。
HTML 常用的块级元素和行内元素
u010194271的博客
10-09 617
块级元素行内元素divspanpah1-h6strongul,olli,emtablei,b,ublockquoteimgbrcodenavlabelaside。
前端开发笔记--html 黑马程序员1
m0_73805171的博客
10-08 1485
VsCode在刚下载完成后默认是英文的，这对我们这些中国程序员来说很不友好，为了解决这个问题我们可以选择在VsCode中安装一个这个插件，在安装并重启VsCode后VsCode便会将语言调整为中文。这个插件能够让我们实时看到我们修改后的代码的效果，而不需要在每次修改后都刷新浏览器。这个插件能够帮助我们进行快捷的修改标签在我们修改前一个·标签，后一个标签也会改动。由于篇幅的原因在这里便简单介绍一下一些比较重要的插件，黑马那边有更加全面的插件。这个插件能够让我们选择想要的浏览器进行预览。1.前端开发框架代码。
QD1-P17 HTML 下拉框标签（select、option）
qq_38641599的博客
10-11 356
本节学习：HTML 下拉框标签（select、option）
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值