html5字体行高

行高的定义与作用
行高（Line Height）是指文本行与行之间的垂直距离，包含字体本身的高度和上下间距，合理设置行高可提升文本可读性,避免文字拥挤或松散。

CSS 中设置行高的属性
| 属性 | 说明 |
|—————|———————————————————————-|
| line-height | 核心属性，定义行高倍数或具体值（如 5、20px）。 |
| padding | 内边距，间接影响行高（需结合 display: block 或类似属性）。 |
| margin | 外边距，通常不用于行高控制（会扩大元素整体间距）。 |

line-height 的单位与计算

1. 无单位数值：

   

   • 表示字体大小的倍数。line-height: 1.5 表示行高为当前字体大小的 1.5 倍。
   • 示例：字体大小 16px × 1.5 = 24px 行高。

2. 带单位值：

   • 直接定义固定高度（如 20px），与字体大小无关。
   • 注意：固定值可能导致不同字号下行高比例不一致。

3. 百分比：

   • 相对于当前字体大小的百分比。line-height: 150% 等同于 5。

其他影响行高的因素
| 因素 | 说明 |
|———————|——————————————————————|
| display 属性 | inline 元素（如 <span>）默认行高由浏览器决定，需转为 block 或 inline-block 才能自定义行高。 |
| 图片或元素高度 | 非文本内容（如图片）可能破坏行高一致性，需通过 vertical-align 或 flex 布局调整。 |
| 继承关系 | 子元素未显式设置行高时，会继承父元素的 line-height。 |

实际应用技巧

1. 单行垂直居中：

   • 设置 line-height 等于容器高度，配合 display: inline-block。
   • 示例：

     .center {
       line-height: 50px; / 容器高度为50px /
       display: inline-block;
     }

2. 多行文本行高统一：

   避免混合使用不同单位（如数值与百分比），建议统一用无单位倍数。

相关问题与解答
问题1：为什么 line-height: 100% 看起来和普通文本一样？
解答：line-height: 100% 表示行高等于字体大小，此时行间距为 0，文本看起来与普通状态一致，若需增加间距，需设置大于 100% 的值（如 2 或 150%）。

问题2：如何让子元素行高独立于父元素？
解答：子元素需显式设置 line-height，否则会继承父值。

.parent {
  line-height: 1.5;
}
.child {
  line-height: 1; / 覆盖父级行高 /