CSS vertical-align

这里的小空白就是为了和基线对齐

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>垂直对齐方式</title>
  <style>
    div {
      border: 1px solid #000;
    }

    img {
      /* vertical-align: middle; */

      /* 顶对齐：最高内容的顶部 */
      /* vertical-align: top; */

      /* 底对齐：最高内容的底部 */
      /* vertical-align: bottom; */

      /* 因为浏览器把行内块、行内标签当做文字处理，默认按基线对齐 */
      /* 效果：图片img的底下有空白，转块级不按基线对齐，空白就消失了 */
      /* display: block; */
    }
  </style>
</head>
<body>
  <div>
    <img src="./images/1.webp" alt="">
    我是谁？我在哪？
  </div>
</body>
</html>

在 HTML 中，图片默认是按照基线对齐的方式来布局的，这是因为浏览器将图片视为一个内联元素，就像文字一样，所以会遵循内联元素的对齐规则。以下是具体原因：

内联元素的特性：在 CSS 中，内联元素（如文字、图片等）通常会在一行内显示，并且它们的垂直对齐方式默认是基于基线的。基线是一条虚构的线，大多数字母都位于基线上或基线以上，字母的底部与基线对齐。
兼容性和传统：这种基线对齐的方式是从早期的网页设计和浏览器渲染机制中继承下来的，为了保持与旧版本的 HTML 和 CSS 规范的兼容性，以及与大多数网页设计实践的一致性，浏览器一直沿用了这种默认的对齐方式。
文本排版的一致性：将图片与文字的基线对齐有助于在文本段落中保持整体的排版一致性。当图片和文字在同一行时，它们的底部会大致对齐，使得文本流看起来更加整齐和自然。

vertical-align 是一个用于控制行内元素（如文本、图片、图标）在垂直方向上对齐方式的 CSS 属性。它主要用于调整元素在行高内的位置，或在行内格式化上下文中的对齐方式。

核心作用

行内元素对齐：控制元素（如文本、图片、图标）在行内的垂直位置。
表格单元格对齐：在表格中控制内容的垂直对齐方式。
与行高配合：常用于解决行内元素（如图片、图标）与文本基线不一致的问题。

注意事项

仅作用于行内元素 ：vertical-align 只对 display: inline、inline-block、table-cell 等行内元素有效，对块级元素无效
常见对齐问题 ：图片底部留白通常是因为 vertical-align: baseline 默认值导致的，可以通过设置 vertical-align: bottom 或 display: block 解决。