为什么 inline-blocks 跳转到一个新行？跟之前的保证金有关系吗？

Question

div {
  width: calc(100vh/6);
  height: calc(100vh/6);
  background: #fdc57b;
  display: inline-block;
}

body {
  background: #62374e;
}

#a {
  margin-left: calc(14vh);
  margin-top: calc(100vh/7.2);
}

#b {
  margin-left: calc(49vw);
}

#c {
  margin-left: calc(14vh);
  margin-top: calc(161vh/5);
}

#d {
  background: #00FF22;
  margin-left: 79.3vh;
  /*This value*/
}

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>

（注意：目标 window 是 400px*300px，所以如果你运行片段它看起来会与下面的图像不同。你可以通过最小化和调整视口大小来解决这个问题.)

我刚开始学习 CSS 并且正在玩。在 CSS 战斗挑战 1，第 2 部分：卡罗姆，我注意到一些奇怪的事情：当我将 'This Value' 更改为 79.3 时，<div> 意外地从移动
至

这是为什么？为什么它不离开 body 的右边缘：之后没有 div 块定义它的位置？或者，为什么 inline-block 不从视图 window 的左边缘开始，如下图所示？

Answer 1

页边距用橙色标记。在右图中，我使用了 221px 作为边距，而在左图中，我使用了 222px；保证金的增加使绿色框 (<div id='d'></div>) 移动到新的一行。我预计它几乎不在新行上，边距从之前的 <div> 开始并继续几乎不在新行上，因为变化只有 1px。但是，一旦边距测量值和元素宽度太大以至于内联块无法容纳，它就会移动到新行并且边距从主体的左边缘开始。

我还发现，在第一个newline/linebreak之后，如果继续增加边距，那么容器就不再受限于屏幕了；它不会换行，而是移出屏幕。

简而言之，内联块移动到新行的原因是因为边距足够大，可以将其推到视图之外window，因此浏览器通过将其移至新行。边距从前面的object/block开始，但是如果移动到新的一行，那么window的左边是前面的对象。如果你进一步增加边距，在它移动到一个新行之后，而不是移动到另一个新行，它将移出屏幕边缘（如上图右下角所示） .

为什么 inline-blocks 跳转到一个新行？跟之前的保证金有关系吗？

Why do the inline-blocks jump to a new line? Is it to do with previous margins?

html

css

margin