为什么4个宽度为25vw的div无法对齐？

问题描述

有4个div，每个div具有width: 25vw;和height: 100vh;。我以为他们可以水平对齐，以便平铺整个浏览器视口。但是他们没有。在第3格和第4格之间有一个换行符，并且滚动条也出现了。

然后我检查了它们，DevTools告诉我每个像素的计算宽度为480px，恰好等于25vw（我的屏幕为1920 * 1080）。

最后，我给了body overflow: hidden。滚动条消失了，并且视口中充满了4个div。一切都很好，除非我完全感到困惑。为什么？ 100vw和100vh不应溢出。

这是我的代码：

body {
  padding: 0;
  margin: 0;
  font-size: 0;
}

div {
  display: inline-block;
  width: 25vw;
  height: 100vh;
  background-color: lightblue;
}

<body>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</body>

或

body {
  padding: 0;
  margin: 0;
}

div {
  float: left;
  width: 25vw;
  height: 100vh;
  background-color: lightblue;
}

<body>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</body>

P.S。我在Chrome＆Firefox＆Chromium Edge上都尝试过display: inline-block;和float: left;，结果是相同的。

P.P.S。看到评论和答案之后，我尝试给出body width: 100vw;，一切都变好了。看来是25vw> body的宽度导致了溢出。但是，我仍然无法理解这种行为。就我而言，主体是一个块，如果有足够的空间，其宽度将扩展到等于其内容宽度。由于100vw不会超出视口，因此不会发生溢出。唯一合理的解释是body默认具有自己的宽度，该值小于100vw，因此会出现换行和滚动条。问题是，这是真的吗？默认值来自哪里？我检查了一下，发现值是1519.2px。为什么这么奇怪？

新代码：

body {
  padding: 0;
  margin: 0;
  width: 100vw;
}

div {
  float: left;
  width: 25vw;
  height: 100vh;
  background-color: lightblue;
}

<body>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</body>

解决方法

对于水平对齐，最好使用flexbox。

body{
 display: flex;
 width: 100vw;
}
body div{
 flex: 0 0 25%;
 max-width: 25%;
}

并确保从正文中删除了所有边距，填充和边框空间

原因是因为vw没有考虑滚动条。因此，如果您在width: 100vw处有一个div并且有一个可见的滚动条，则该div会稍微溢出屏幕。

视口百分比长度是相对于初始包含块。当初始高度或宽度包含块被更改，它们将相应缩放。但是，任何假定滚动条不存在。

csswg

您可能会比较幸运，将div设置为width: 25%可以将滚动条考虑在内。

alignment html viewport-units