css中的 vertical-align与line-height作用详解

一、vertical-align 详解

1. 作用对象：行内元素（inline/inline-block）或表格单元格内容
2. 核心功能：控制元素在行框内的垂直对齐方式
3. 常用取值：
   • baseline（默认）：基线与父元素基线对齐
   • top：元素顶部与行框顶部对齐
   • middle：元素中线与父元素基线+1/2 x-height对齐
   • bottom：元素底部与行框底部对齐
   • 数值值：2px（上移）、-10%（下移）

示例（图标与文本对齐）：

.icon {
  vertical-align: middle;
  width: 20px;
}
.text {
  vertical-align: middle;
}

二、line-height 详解

1. 作用对象：块级容器
2. 核心功能：定义行框的最小高度
3. 特性：
   $$line-height=字体大小+上半间距+下半间距$$
   • 无单位值（推荐）：1.5（相对于当前字体大小）
   • 固定值：24px
   • 百分比：150%

文本垂直居中实现：

.box {
  height: 50px;
  line-height: 50px; /* 单行文本垂直居中 */
}

三、相互关系

1. 基线对齐依赖：vertical-align的基线对齐基于line-height计算的基线位置

2. 行框高度计算：

   <div style="line-height: 30px;">
     <span style="font-size: 40px; vertical-align: top">A</span>
     <span style="vertical-align: bottom">B</span>
   </div>
   

   实际行框高度=最高元素的顶部到最低元素的底部距离

3. 数值计算示例：
   当字体大小为16px，line-height为1.5时：
   $$16px\times 1.5=24px$$
   实际行框高度可能因vertical-align调整而变化

四、常见问题解决方案

1. 图片底部间隙：

   img {
     vertical-align: bottom; /* 或 top/middle */
     /* 或 */
     display: block;
   }
   

2. 多行文本居中：

   .container {
     display: flex;
     align-items: center;
     line-height: normal; /* 重置单行设置 */
   }
   

3. 精确对齐控制：

   .icon-text {
     display: inline-flex;
     align-items: center;
     vertical-align: middle;
   }
   

五、调试技巧

1. 使用开发者工具显示基线：

   * {
     background: linear-gradient(#fff 94%, red 94% 96%, #fff 96%);
   }
   

2. 可视化line-height区域：

   p::before {
     content: '';
     display: inline-block;
     height: calc(var(--line-height) - 1em);
     background: rgba(0,255,0,0.2);
   }