Question

我有两个跨度。在内跨度上我有overflow-x:hidden。这会在内跨距下方产生额外空间。为什么呢？

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

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

注意：我只测试了最新的Chrome。

Answer 1

Visual formatting model - 9.4.1 Block formatting contexts

浮动，绝对定位的元素，阻止不是块框的容器（例如内联块，表格单元格和表格标题），以及带＆＃39的块框;溢出＆＃39;除了＆＃39; visible＆＃39; （当该值已传播到视口时除外）为其内容建立新的块格式化上下文。

更具体地说，当溢出属性改变时，建立新的块格式化上下文。默认情况下，元素的vertical-align属性值为baseline。您可以将其更改为top之类的内容，以便解决此问题。

Updated Example

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元素 - example证明了这一点并不会发生。

Answer 2

尽管在接受的答案中使用了以上引号，但此行为与“块格式设置上下文”以及inline-block值的“块”部分完全无关。都是关于它的“内联”部分的。

所有inline-*元素都参与the Inline Formatting Context。也就是说，它们与文本和其他行内元素一起被放置在所谓的“行框”中。这些元素和文本彼此对齐，因此每个行框的高度都是从最高元素的顶部到最低元素的底部计算的。

默认情况下，行内元素与它们的字体的基线对齐（请参见下面示例中的第一行）。即使父元素没有实际文本，基线的位置和行框的最小高度也将像其具有文本一样进行计算（规范将此“虚构”文本称为元素的“撑杆”）。因此，行框始终在基线上方（用于字体上升和变音符号）和在其下方（用于字体下降）具有一定的空间-请参见示例的第二行。

inline-block元素的棘手部分是overflow属性更改了这些元素（section 10.8.1 of the spec的结尾）的基线：

“内嵌块”的基线是正常流程中其最后一个线框的基线，除非它没有内嵌线框，或者其“上溢” '属性的计算值不是'visible'，在这种情况下，基线是底部边沿。

因此，从技术上讲，始终将基线以下的空间保留为，默认情况下为overflow: visible，但应放置inline-block元素，使其文本的基线与父基线对齐，底部移到下方。在许多情况下，这会使该行内嵌块成为该行中的最低元素，因此为字体降序保留的空间是不可见的。但是，更改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-*来产生副作用。在OP的示例中，最好的解决方案是对内部display: block使用span，它不涉及行框计算之类的任何“魔术”。

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

2 个答案: