CSS | line-height 与 vertical-align详解

行框高度 line-height

定义

• 对于一个行内元素，line-height指定了其自身参与行高计算时的高度。
  行内非替换盒的垂直内边距，边框是从内容区的顶部和底部开始，与line-heigh’无关。line-height只在计算行框高度时使用
• 对于一个内容由行内元素组成的块容器，'line-height’指定了元素内行框的最小高度。
  这个最小高度包含基线上方的最小高度和下方的最小深度。
  就像每个行框以一个具有该元素的字体和行高属性的0宽行内盒开始。我们把这种假想盒叫做"strut"（在非官方描述中，也被称为幽灵空白点）

属性取值

属性值含义如下：

形式	含义
normal	默认值，因浏览器而不同，约为1.0-1.2，此处含义与指定数字相同
指定长度	指定的长度用来计算行框的高度，负值非法
百分比	指定该属性的计算值为百分比乘以该元素的字体大小，负值非法
数字	指定属性的应用值为数字乘以该元素的字体大小，负值是非法的。

百分比与数字的区别

文档中指定值，计算值，应用值的说法稍显生涩，我们用更直观的语言来描述使用百分比与数字赋值的区别。

• 使用百分比赋值后，将通过 font-size * 百分比 计算得到 实际的line-height，并将此line-height传递给子元素。子元素通过修改font-size不会改变继承来的line-height，除非重新指定line-height
• 使用数字赋值后，将这一数字（倍数）传递给子元素，每一级子元素将根据 自身的font-size * 倍数 得到 实际的line-height。

示例如下：
橙色区域为百分比赋值，淡蓝色区域为数字（倍数）赋值。
因为百分比赋值后，line-height以定值传递给子元素，故因为不适配，文本出现了重叠现象。
而倍数赋值则一切正常。

        .percent {
   
            font-size: 20px;
            line-height: 100%;

            margin: 40px;
            padding: 20px;
            border: orange dotted;
        }

        .number {
   
            font-size: 20px;
            line-height: 1;

            padding: 20px;
            margin: 40px;
            border: skyblue dotted;

        }

        span {
   
            font-size: 50px;
        }

    <div class="percent">
        <span>On a block container element whose content is composed of inline-level elements, 'line-height' specifies
            the minimal
            height of line boxes within the element.