解释一下vertical-align出现以下现象的原因吗？

Question

 <div class="coder">
 <img src="images/code2.png" style="vertical-align:middle;">
 <span>打开微信，扫描二维码,<br>用手机观看视频</span>
 </div>

.coder{

width: 343px;
height: 100px;
background: rgba(0,0,0,.2);
padding: 10px;
}
.coder img{
width: 100px;
height: 100px;
display: inline-block;
vertical-align: middle;
}

.coder span{
display:inline-block;
line-height:35px;
vertical-align:middle;
padding-left:20px;
}
按照上面css布局，呈现效果是底下这幅图片

当去掉img的vertical-align，但是span的vertical-align：middle保留，则出现以下样式

当去掉span的vertical-align，但是img的vertical-align：middle保留，则出现以下样式

哪位对这个属性比较了解的，可以解释一下以上两种现象吗？我看过此网站关于vertical-align的解释，但是还是不理解，也百度过，还是不懂，可能需要一些通俗的解释才理解吧

Answer 1

我来斗胆答一下把，其实 vertical-align 这个我理解的也不是很透彻。

首先我们知道，设置 vertical-align 的值都是跟父级盒子相比的，元素的 vertical-align 的默认值是 baseline，也就是元素的基线和父级盒子的基线对齐。题主的例子中去掉元素的 vertical-align 属性，其实就是默认基线对齐了。我们先来明确一下这两个对齐方式的定义：

baseline: 默认值，盒子的基线与父级盒的基线对齐。
middle: 将盒子的垂直中心点与父级盒子基线往上 X 一半高度的位置对齐。

要想分析这些情况，我们需要首先确定这两个元素所在的 line box 的基线位置，虽然 css 并没有规定 line box 基线的位置，不过我们可以通过一些手段来获得这个位置。
https://codepen.io/zengkan070...
上面的例子中，我加了一个 p 元素，宽度为 100% 高度是 1px，设置为基线对齐，而且通过负的 margin-right 把其他两个元素拉上来处于同一个 line-box。这样这个 p 就可以看做是这个 line-box 的基线。通过这个例子看你的问题：

• 当 img 取消 vertical-align 属性时，默认基线对齐。文字还是居中对齐，可以看到代表基线的 p 穿过文字块，文字块的垂直中心是跟 p 元素右端 X 的中心点对齐的。

• 当文字块基线对齐，图片基线对齐。文字块里面的 x 的底边就是文字块的基线，刚好和 line-box 基线 p 重合。

line-box 的基线位置会受其内部元素的变化影响，基线位置是不固定的。当有的元素变化引起 line-box 基线位置变化时，这个 line-box 中其他有 vertical-align 属性的元素的位置也会发生变化。就像上面例子中的图片元素，由于在它上下没有足够的空间，所以在改变它的 vertical-align 取值时，为了防止图片元素溢出，line-box 的基线位置就会变化。
不过不管 line-box 基线位置怎么变化，我们都可以在这个 line-box 中放置一个基线对齐（默认，只要不人为修改）的“x”就可以确定，x 的底边就是 line-box 的基线位置。我上面例子中用行块的 p 元素是为了更直观。

Answer 2

你在img和span中间随便加入文字，看效果

1. img去掉vertical-align后，img的vertical-align就是默认的baseline,就是而span的依然是middle,