HTML流之外的神秘空白？_Html_Css

HTML流之外的神秘空白？

html css

HTML流之外的神秘空白？,html,css,Html,Css,我有一个简单的div包装器，里面有四个跨距 <body> <main> <div> <span>One</span> <span>Two</span> <span>Three</span> <span>Four</span> </div> </main> </bod

我有一个简单的div包装器，里面有四个跨距

<body>
  <main>
    <div>
      <span>One</span>
      <span>Two</span>
      <span>Three</span>
      <span>Four</span>
    </div>
  </main>
</body>

我不明白是怎么回事：下班后，还是这是一个小故障？底部的白色间隔到底是从哪里来的

这里是问题的再现：

只需添加一个

溢出：隐藏到main
或甚至main
的父级都应该可以工作
检查链接

取消注释溢出：隐藏
或框大小：边框框
然后，将删除web末端的空白
盒子的尺寸也可以调整！我总是把它和边框框放在一起，所以忘了它了，哈哈，也许这是一个更好的解决方案
另一个选择可能是添加框大小：边框框
，因为这些链接元素上有填充。
原因在于高度：calc（100%-20px），其中20px未启用。为什么需要在跨度上放置100%的高度？如果我从.link
中删除此高度：计算（100%-20px）
。我觉得不错，还是这不是你想要的？@cybersoft如果你愿意，试着把它改成-40px。你会发现你是错的；有一些看不见的东西造成了这种差距。@DavidDomain我很欣赏你的意见，但问题显然是问空白是从哪里来的，而不是有效的解决办法是什么be@WyattArent我试过了，我看到链接白色块没有到达底部。所以，这取决于浏览器和其他东西。。作为一个解决方案-尝试使用框大小：边框框，对于我的案例，它是有效的。无可否认，我对这个解决方案翻了翻眼睛，认为这是一个很弱的掩饰，我可以使用鼠标中键/鼠标滚轮立即绕过它。这实际上完全解决了问题。我勒个去？不管怎样，我很抱歉这么快就做出判断，非常感谢你的解决方案。如果没有人能对这里发生的事情给出深入的解释，我会给你答案answer@Hector还有Wyatt，我试过overflow:hidden，但我仍然可以看到白色的大缺口，然后它是如何解决你的问题的？@Leothelion，我把它应用到了。link wrapper，但是我也在使用Google Chrome，所以它可能只是你的浏览器？我想知道这是否是每个浏览器都会遇到的格式问题has@wyatt我应用了overflow:hidden in.link包装器类和您给定的代码，我可以在chrome和ff中看到巨大的白色缺口。@HéctorLeón是的，我真的很感谢您Hector。如果您有兴趣跟踪，我已经为它开了一张bugzilla票：
* {
  padding: 0;
  margin: 0;
}

main {
  position: relative;
  height: 100vh;
  width: 100%;
  background-color: rgb(45, 45, 65);
  text-align: center;
}

div {
  position: absolute;
  top: 50%;
  left: 25%;
  right: 25%;
  bottom: 0;
  text-align: justify;
  display: block;
}

div:after {
  display: inline-block;
  width: 100%;
  content: '';
}

span {
  background-color: rgb(25, 25, 45);
  box-sizing: border-box;
  display: inline-block;
  font-size: 1em;
  padding: 10px;
  height: 100%;
}

span:hover {
  background-color: white;
}