带有图像vertical-align的内联框：中间带有父框

Question

请运行演示：

＆＃13;

＆＃13;

* {
  margin:0;
  padding:0;
}
.body {
  font-family:Microsoft Yahei;
  font-size:16px;
  background-color:lightblue;
  height: 200px;
  width:200px;
  line-height:2;
}
.body span {
  background-color:pink;  
}
.body img {
  width:50px;
  height:50px;
}
.body .img-wrapper {
  background-color:orange;
}
.body .img-wrapper {
  vertical-align:middle;
} 

＆＃13;

<div class="body">
  <span class="wrapper">
      words-g words-g words-g
    <span class="img-wrapper">
      <img src="https://avatars3.githubusercontent.com/u/23273077" alt="">
        s
    </span>
    words-g words-g words-g
  </span>
</div>

＆＃13;

＆＃13;

＆＃13;

关键是我设置了

.body .img-wrapper {
      vertical-align:middle;
} 

我原以为下图中的红线在同一行：

根据specification，

  

将框的垂直中点与父框的基线加上父框的x高度的一半对齐。

所以，我认为：

• 框的垂直中点是上图中的第一条红线
• 父框的基线加上父级的x高度的一半=第二条红线

但事实证明我错了，我猜关键是父亲的x高度。所以，我发现了这个：

所以，我认为由于图像的存在，在这种情况下父的x高度不是第二条红线。

所以，我的问题是：

• 在这种情况下，父的x高度是多少？是否由于图像的存在而改变了？

• 还是别的错了？

请注意：

• 我只想在这种情况下获得x-height值，这样我就能更好地理解vertical-align。

• 我不是要求具体的解决方案。

感谢您的帮助！

Answer 1

首先，元素的x-height不受图像影响，仅由font-size定义，当然还有font-family使用。然后，为了获得x-height的值，您需要考虑ex单位。

以下是对this answer

的更好说明

您可以清楚地看到垂直对齐的每个值之间的差异，也请注意em和ex单位的插图。现在，为了获得x-height的确切值，您只需使用ex单位。

以下是一个例子：

* {
  margin:0;
  padding:0;
}
body {
  font-family:Microsoft Yahei;
  font-size:16px;
  background-color:lightblue;
  line-height:2;
}
span {
  background-color:pink;  
  border-right:1ex solid red;
  border-left:1em solid red; 
}
img {
  width:50px;
  height:50px;
}

<span>
    words-g words-g words-g
</span>
<br>
<span>
    words-g words-g words-g <img src="https://avatars3.githubusercontent.com/u/23273077" alt="">
</span>

正如您所看到的，我使用ex和em单位添加了左右边框，如果我检查计算值，我就可以得到确切的值。您还会注意到span都具有相同的值，表明图像对它没有影响。