[css] 第21天 说说你对line-height是如何理解的？

[haizhilin2013]

第21天 说说你对line-height是如何理解的？

[yxkhaha]

• line-height 行高，就是两行文字之间基线的距离，用来调整文字的行间距。

[Mooiq]

line-height的高度单位建议使用em、rem，这样就可以避免因为容器高度变化引起的行高差异。

[tzjoke]

@Mooiq 不带单位的纯数字才是更好的

[AricZhu]

行高属性，表示一行是字体的多大倍数，比如line-height: 1, line-height: 1.5就分表表示一行高度是当前字体大小的一倍，或1.5倍

[Konata9]

line-height 在日常用的最多的是让单行文字垂直居中（其实不需要设置 height，一个 line-height 即可）。因为 line-height - font-size 为行距，一般会近似平分到文字的上下两边，使文字看上去垂直居中。如果需要多行文字的垂直居中，还需要加上 vertical-align: middle;。

line-height 可以不设置单位，表示 font-size 的倍数。

另外对于非替换元素的纯内联元素，其高度是由 line-height 所决定的。

参考文章：
张鑫旭大神 《CSS 世界》
CSS 深入理解之 line-height

[151819880412]

请问一下，如果高度设置的是百分比该怎么使用line-height居中？还是说有其他方法

[blueRoach]

• line-height行高，会以lineheight的值取中线，来展示元素的位置
• 单位有PX和没有单位（font-size的倍数）
• 对于没有高度的元素，高度是由line-height决定的

[smile-2008]

line-height行高，会以lineheight的值取中线，来展示元素的位置
单位有PX和没有单位（font-size的倍数）
对于没有高度的元素，高度是由line-height决定的

[maxthonl]

@Mooiq 不带单位的纯数字才是更好的

MDN没有欺骗你，但是也请仔细看看em的定义，这两个应该可以划等号

[zxcdsaqwe123]

行高，可以用来控制单行文字的占位高度

[amikly]

**line-height**属性用于设置多行元素的空间量，如多行文本的间距。

对于块级元素，它指定元素行盒（line boxes）的最小高度。

对于非替代的 inline 元素，它用于计算行盒（line box）的高度。

两行文字基线之间的高度距离

##　属性值

值	描述
normal	默认。设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length	设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。
inherit	规定应该从父元素继承 line-height 属性的值。

[Iambecauseyouare]

line-height行高
指一行字的高度，包含了字间距，实际上是下一行基线到上一行基线距离
如果一个标签没有height属性，则是line-height决定
height和line-height一样的值，可以垂直居中

[an31742]

"line-height" 属性用于控制文本行之间的行高（行间距）。它可以影响到文本在行框内的垂直对齐方式和整体间距的外观。下面是我对这个属性的理解：

1. 行高的计算：

   • 行高的计算是相对于文本字体大小来进行的，可以使用绝对单位（如像素）或相对单位（如百分比、倍数）来指定行高的值。
   • 行高的计算包括文本的实际高度、上行高度（水平线以上）和下行高度（水平线以下）。这些值的组合形成了文本行的整体高度。

2. 行高的影响：

   • "line-height" 属性不仅影响文本行之间的垂直间距，还会影响行内元素在行框中的垂直对齐方式。
   • 如果行高值大于文本字体大小，文本将垂直居中显示在行框内。如果行高值小于字体大小，文本将向上对齐。
   • 行高值还会影响文本行在垂直方向上的外观，决定了行与行之间的间距大小。

总结起来，"line-height" 属性是控制文本行与行之间的垂直间距的一种方式。通过设置适当的行高值，可以影响文本的垂直对齐方式和整体间距，以满足设计和排版的需求。

[never123450]

line-height 是 CSS 属性，用于设置行高，即行框的高度。它可以影响文本行在垂直方向上的间距和对齐。

具体来说， line-height 可以接受以下值：

1. 像素值（px）：设置行高为固定像素值。例如， line-height: 24px; 表示每一行的高度为 24 像素。

2. 百分比值（%）：设置行高为相对于当前字体大小的百分比值。例如， line-height: 150%; 表示每一行的高度为当前字体大小的 150%。

3. 数字值：设置行高为相对于当前字体大小的倍数。例如， line-height: 1.5; 表示每一行的高度为当前字体大小的 1.5 倍。

4. 单位less：设置行高为没有单位的值，相对于当前字体大小。例如， line-height: 1.5; 表示每一行的高度为当前字体大小的 1.5 倍。

line-height 还可以接受其他一些特殊值，如 normal 、 inherit 等。

通过调整 line-height 的值，可以改变文本行的间距和对齐方式。较大的 line-height 值会增加行之间的间距，而较小的值则会减少间距。此外， line-height 还会影响垂直居中对齐的效果。

需要注意的是， line-height 的具体效果还会受到其他因素的影响，如字体大小、行内元素的布局等。因此，在调整 line-height 时，需要综合考虑其他样式属性和布局需求，以达到期望的效果。