彻底弄懂vertical-align与行盒前言在vertical-align | MDN)中是这样描述的， verti

前言

在vertical-align | MDN)中是这样描述的， vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

其中行内元素应该大家都知道，包含行内替换元素如img 等与行内非替换元素span等，表格单元格就是正常表格中的td 等元素。这句话其实指的就是行内/表格单元格元素在块级父元素内的垂直方向上的对齐方式。

这里引出一个概念：行盒（line box）

1 行盒

先举个例子

<style>
  .box-container {
    background-color: pink;
    padding: 50px;
  }

  .inner-box {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-color: red;
  }
</style>

<body>
<div class="box-container">
  所有HTML元素可以看作盒子，<span class="inner-box"></span>在CSS中，"box
  model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
</div>
</body>

在这里面中.box-container 的div是一个盒子模型，里面的content部分包裹着两个行盒，第一个行盒比较大，第二个行盒就是普通文本。此时其行盒高度就是文本的行高line-height。行盒的表现就是行盒会包裹住该行里面所有的行内级元素。

1.1 行盒的现象

先举几个例子，用来说明行盒的表现，包裹住其行的所有行内级元素

1.1.1 行盒包裹一张图片

<style>
  .box {
    background-color: pink;
  }
  .box img {
    width: 200px;
  }
</style>

<body>
<div class="box">
  <img src="./beauty.jpg" alt="" />
</div>
</body>

上述代码运行后底部有一部分的空格，这个等会说这个就是vertical-align的表现

1.1.2 行盒包裹图片+文字

1.1.3 行盒包裹图片+ 文字 + 行内块元素（高度大于其他的行内级元素）

1.1.4 行盒包裹图片+ 文字 + 行内块元素（行内快内有文字且行内块有下边距）

1.2 结论

行盒一定会包裹住里面的每个行内块元素，但是里面的元素要怎么对齐呢，这就引申出了vertical-align

2. vertical-align

vertical-align一般是给行内级元素设置的，可设置其相对于其行盒的对齐方式，没有设置的默认是baseline基线对齐，这里需要补充下行高的定义与可视化图

2.1 行高

结合上面的两个图，行高作用如下：

可以设置多行文本的间距，间距/行距 = 行高 - 文本的高度
结合图可推理出，当行高（上图中深蓝色的区域）等于包裹块的高度时，文本就会垂直居中

2.2 对于上面现象的解释

默认是基线对齐，行内块元素的基线如下

文本的baseline是字母x的下方
Inline-block有文本时，baseline是最后一行文本的x的下方
Inline-block默认的baseline是margin-bottom的底部（没有，就是盒子的底部）
图片的baseline默认是底部

对于1.1.1 这个其实与1.1.2 表现是一样的就是默认情况下是baseline，其中1.1.1 虽然没有写文字，但是其内部对其的时候会预留有行文字，效果就与1.1.2 相同了。也就是图片的底部默认会跟红色基线对齐，可以看出其与底线之间是有一些间距的，也就解释了为什么图片下面是有一些空隙的。 1.1.3 跟1.1.4 中就是因为其基线的原因有magrn-bottom 就找margin-bottom，没有的话找最后一行文字最后找底部。然后行盒要默认包裹住其所有的元素