为什么x溢出:隐藏导致下面有额外的空间？

Question

我在彼此内部有两个跨度.在我的内心跨度上overflow-x:hidden.这会在内跨距下方产生额外空间.为什么？

<span style="" class="yavbc-color-tip"><span style="">Some text</span></span>

小提琴:http://jsfiddle.net/U92ue/

注意:我只在最新的Chrome中测试过.

Answer 1

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

浮动,绝对定位元素,阻止不是块框的容器(例如内联块,表格单元格和表格标题),以及"溢出"除"可见"之外的块框(除非该值已传播)到视口)为其内容建立新的块格式化上下文.

更具体地说,当溢出属性改变时,建立新的块格式化上下文.默认情况下,元素的vertical-align属性值为baseline.你可以简单地将其更改为类似的东西top来解决这个问题.

更新的示例

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-block？时,不会发生这种情况？inline元素不会出现- 示例说明这一点.

Answer 2

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

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

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

inline-block元素的棘手部分是overflow属性改变了这些元素的基线（规范第 10.8.1 节结束）：

'inline-block' 的基线是它在正常流中的最后一个 line box 的基线，除非它没有 in-flow line box或者它的 'overflow' 属性的计算值不是 'visible'，在在这种情况下，基线是底部边距边缘。

因此，虽然技术上始终保留基线下方的空间，但默认情况下overflow: visible，内联块元素的放置使其文本的基线与父基线对齐，并且其底部移动到其下方。在许多情况下，这使得该行内块成为行中的最低元素，因此为字体下行保留的空间不可见。但是，更改该overflow值会使整个元素呈现在基线上方（就像一个<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。

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