为什么 x-overflow：hidden 会导致下面有额外的空间？

可视化格式模型 - 9.4.1 块格式设置上下文

浮点数、绝对定位的元素、不是块框的块容器（如内联块、表单元格和表标题）以及具有“可见”以外的“溢出”的块框（除非该值已传播到视口）为其内容建立新的块格式上下文。

更具体地说，当 overflow 属性发生更改时，将建立新的块格式上下文。默认情况下，元素的属性值为 。您可以简单地将其更改为类似的东西以修复此问题。vertical-alignbaselinetop

更新的示例

span.yavbc-color-tip span {
    display: inline-block;
    padding: 3px;
    border-radius: 8px;   
    border: none;
    background-color:#005e8e;
    color:#7cd3ff;
    overflow-x: hidden; /* This gives extra space under this span. Why? */
    vertical-align:top;
}

请注意，当元素的显示未更改为 ？它不会发生在元素中 - 示例证明了这一点。inline-blockinline

尽管在接受的答案中有上述引用，但此行为与块格式上下文和值的“块”部分完全无关。这一切都与它的“内联”部分有关。inline-block

所有元素都参与内联格式设置上下文。这意味着，它们与文本和其他内联级元素一起放置在所谓的“行框”中。这些元素和文本相互对齐，因此每个线框的高度是从最高元素的顶部到最低元素的底部计算的。inline-*

默认情况下，内联级元素与其字体的基线对齐（请参阅以下示例中的第一行）。即使父元素没有实际文本，基线的位置和线框的最小高度也会像有文本一样计算（规范将此“虚构”文本称为元素的“支柱”）。这就是为什么行框总是在基线上方（对于字体升序和变音符号）和下方（对于字体降序）有一些空间的原因 — 请参阅示例的第二行。

元素的棘手部分是属性更改了这些元素的基线（规范第 10.8.1 节末尾）：inline-blockoverflow

“内联块”的基线是其在正常流中最后一个行框的基线，除非它没有流入线框，或者其“溢出”属性具有“可见”以外的计算值，在这种情况下，基线是下边距边。

因此，虽然从技术上讲，基线下方的空间始终是保留的，但在默认情况下，放置内联块元素，以便其文本的基线与父基线对齐，并将其底部移动到其下方。在许多情况下，这会使此内联块成为行中最低的元素，因此为字体降序保留的空间不可见。但是，更改该值会使整个元素呈现在基线以上（如元素），从而使所有这些空间可见。overflow: visibleoverflow<img>

p {
  margin: .5em;
  font: 32px/1.5 serif;
  color: #fff;
  background: #888;
}

span {
  display: inline-block;
  font: 12px/1 sans-serif;
  background: #fff;
  color: #000;
  padding: 2px;
  border: 1px solid green;
}

.ovh {
  overflow: hidden;
  border-color: red;
}

<p>Text with image <img src="http://via.placeholder.com/30x15"> and <span>two</span> <span>inline-block</span>s</p>

<p><img src="http://via.placeholder.com/30x15"> <span>only</span> <span>inline-blocks</span></p>

<p><img src="http://via.placeholder.com/30x15"> <span>regular</span>, the <span class="ovh">overflowed</span> trick</p>

一般来说，内联格式是很棘手的。您可以在本文中找到对其一些陷阱和惊喜的良好解释：http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align。

我想说的是，一个好的经验法则是不要使用它的副作用，如果你真的不打算将元素放在文本中。在 OPs 示例中，最好的解决方案是用于内部，它不涉及任何“魔术”，如线框计算。display: inline-*display: blockspan