html - 当内容被隐藏并内联块时，您能在第三张表上解释额外的填充吗？

在元素上添加“ display：inline-block”和“ overflow：hidden”似乎会改变表中的边距。它似乎与垂直对齐有关，但是为什么即使仅水平对齐，“溢出：隐藏”也会有所不同？ Safari似乎没有受到影响。

http://jsbin.com/ribezifoli/1/edit?html,css,output

table {
  border-collapse: collapse;
  margin: 10px;
}

td {
  border: 1px solid black;
}

span {
  background-color: red;
}

.one span {
  display: inline-block;
  /* overflow: hidden; */
}

.two span {
  /* display: inline-block; */
  overflow: hidden;
}

.three span {
  display: inline-block;
  overflow: hidden;
  /* vertical-align: top; */
}

<table class="one">
  <tr>
    <td><span>hello</span></td>
    <td><span>hello</span></td>
  </tr>
  <tr>
    <td><span>hello</span></td>
    <td><span>hello</span></td>
  </tr>
</table>
<table class="two">
  <tr>
    <td><span>hello</span></td>
    <td><span>hello</span></td>
  </tr>
  <tr>
    <td><span>hello</span></td>
    <td><span>hello</span></td>
  </tr>
</table>
<table class="three">
  <tr>
    <td><span>hello</span></td>
    <td><span>hello</span></td>
  </tr>
  <tr>
    <td><span>hello</span></td>
    <td><span>hello</span></td>
  </tr>
</table>

最佳答案

从section 10 of CSS2的最后一段开始：


  “ inline-block”的基线是正常流中其最后一个线框的基线，除非它没有流入流线框，或者如果其“ overflow”属性的计算值不是“ visible”，则在这种情况下，基线是下边距。


因此，带有overflow: hidden的内联块的基线是它们的底部边缘，并且您看到的额外填充是为内联块所驻留的基线下方的印刷下降空间保留的空间。这些内联块中的文本位于单独的基线上，与其父表单元格无关。

关于html - 当内容被隐藏并内联块时，您能在第三张表上解释额外的填充吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48229825/