css 文字大小不同 底线对齐

### 解决不同字体大小下的基线对齐问题

为了实现不同字体大小下文字的基线对齐，可以采用多种方法来调整布局和样式。一种常见的方式是通过设置 `line-height` 和 `vertical-align` 属性来控制元素间的垂直排列。

对于多行文本的情况，在较小设备上展示时，应当注意标题与正文字体的比例关系[^1]。当屏幕尺寸变化时，这些比例也需要相应调整以保持良好的可读性和美观度。具体来说：

- **使用 Flexbox 或 Grid 布局**：这两种现代 CSS 布局方式可以帮助更好地管理复杂页面结构中的元素位置，并能轻松创建响应式的网格系统。

  .container {
    display: flex;
    align-items: baseline; /* 确保子项沿基线对齐 */
  }

- **设定一致的 line-height**：给定相同的行高可以让所有级别的文本在同一水平线上整齐排列。这通常意味着要为整个文档或特定区域定义统一的基础行距。

  body, h1, p {
    margin: 0;
    padding: 0;
    line-height: 1.5em; /* 统一的行间距 */
  }

- **利用 vertical-align 属性**：此属性可用于内联级元素之间强制执行基线对齐规则。特别是对于表格单元格内的内容非常有用。

  td img {
    vertical-align: bottom; /* 图像底部与相邻文本基线对齐 */
  }

另外值得注意的是，在移动设备或其他小型屏幕上，由于空间有限，应该减少大标题与正文间过大对比度的设计选择，从而使得整体视觉更加和谐。