第21天 说说你对line-height是如何理解的?
Activity
yxkhaha commentedon May 7, 2019
Mooiq commentedon May 8, 2019
line-height的高度单位建议使用em、rem,这样就可以避免因为容器高度变化引起的行高差异。
tzjoke commentedon May 29, 2019
@Mooiq 不带单位的纯数字才是更好的
AricZhu commentedon Jul 6, 2019
行高属性,表示一行是字体的多大倍数,比如line-height: 1, line-height: 1.5就分表表示一行高度是当前字体大小的一倍,或1.5倍
Konata9 commentedon Aug 5, 2019
line-height
在日常用的最多的是让单行文字垂直居中(其实不需要设置height
,一个line-height
即可)。因为line-height - font-size
为行距,一般会近似平分到文字的上下两边,使文字看上去垂直居中。如果需要多行文字的垂直居中,还需要加上vertical-align: middle;
。line-height
可以不设置单位,表示font-size
的倍数。另外对于非替换元素的纯内联元素,其高度是由
line-height
所决定的。参考文章:
张鑫旭大神 《CSS 世界》
CSS 深入理解之 line-height
151819880412 commentedon Apr 14, 2020
请问一下,如果高度设置的是百分比该怎么使用line-height居中?还是说有其他方法
blueRoach commentedon Jun 10, 2020
smile-2008 commentedon Sep 21, 2020
line-height行高,会以lineheight的值取中线,来展示元素的位置
单位有PX和没有单位(font-size的倍数)
对于没有高度的元素,高度是由line-height决定的
maxthonl commentedon Oct 27, 2020
MDN没有欺骗你,但是也请仔细看看em的定义,这两个应该可以划等号
zxcdsaqwe123 commentedon Oct 10, 2021
行高,可以用来控制单行文字的占位高度
amikly commentedon Nov 9, 2021
**
line-height
**属性用于设置多行元素的空间量,如多行文本的间距。对于块级元素,它指定元素行盒(line boxes)的最小高度。
对于非替代的 inline 元素,它用于计算行盒(line box)的高度。
两行文字基线之间的高度距离
## 属性值
Iambecauseyouare commentedon Mar 6, 2023
line-height行高
指一行字的高度,包含了字间距,实际上是下一行基线到上一行基线距离
如果一个标签没有height属性,则是line-height决定
height和line-height一样的值,可以垂直居中
an31742 commentedon Aug 25, 2023
"line-height" 属性用于控制文本行之间的行高(行间距)。它可以影响到文本在行框内的垂直对齐方式和整体间距的外观。下面是我对这个属性的理解:
行高的计算:
行高的影响:
总结起来,"line-height" 属性是控制文本行与行之间的垂直间距的一种方式。通过设置适当的行高值,可以影响文本的垂直对齐方式和整体间距,以满足设计和排版的需求。
never123450 commentedon Sep 1, 2023
line-height
是 CSS 属性,用于设置行高,即行框的高度。它可以影响文本行在垂直方向上的间距和对齐。具体来说,
line-height
可以接受以下值:像素值(px):设置行高为固定像素值。例如,
line-height: 24px;
表示每一行的高度为 24 像素。百分比值(%):设置行高为相对于当前字体大小的百分比值。例如,
line-height: 150%;
表示每一行的高度为当前字体大小的 150%。数字值:设置行高为相对于当前字体大小的倍数。例如,
line-height: 1.5;
表示每一行的高度为当前字体大小的 1.5 倍。单位less:设置行高为没有单位的值,相对于当前字体大小。例如,
line-height: 1.5;
表示每一行的高度为当前字体大小的 1.5 倍。line-height
还可以接受其他一些特殊值,如normal
、inherit
等。通过调整
line-height
的值,可以改变文本行的间距和对齐方式。较大的line-height
值会增加行之间的间距,而较小的值则会减少间距。此外,line-height
还会影响垂直居中对齐的效果。需要注意的是,
line-height
的具体效果还会受到其他因素的影响,如字体大小、行内元素的布局等。因此,在调整line-height
时,需要综合考虑其他样式属性和布局需求,以达到期望的效果。