为什么内联块跳转到新行？和之前的利润有关系吗？答案

【问题标题】：Why do the inline-blocks jump to a new line? Is it to do with previous margins?为什么内联块跳转到新行？和之前的利润有关系吗？
【发布时间】：2021-07-08 20:35:46
【问题描述】：

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>

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

我刚刚开始学习 CSS，并且正在玩耍。在 CSS 战斗挑战 1，第 2 部分：Carrom 中，我注意到一些奇怪的事情：当我将“此值”更改为 79.3 时，<div> 出人意料地从移动
到

这是为什么？为什么它不离开身体的右边缘：之后没有 div 块来定义它的位置？或者，为什么内联块不从查看窗口的左边缘开始，如下图所示？

【问题讨论】：

检查代码以查看边距+元素宽度无法容纳在前一行内，因此转到第二行
@TemaniAfif 但是为什么它不去最左边的新行呢？为什么它看起来会水平跳跃？
它会换行，不知道你说的 jump 是什么意思，但是你的元素在换行

标签： html css margin

【解决方案1】：

边距标记为橙色。在右图中，我使用了 221px 作为边距，而在左边我使用了 222px；边距的增加使绿色框 (<div id='d'></div>) 移动到新行。我预计它只是勉强在新行上，边距从以前的<div> 开始，然后勉强继续到新行上，因为变化只有 1px。但是，一旦边距测量值和元素宽度太大而无法容纳 inline-block，它就会移动到新的一行，并且边距从正文的左边缘开始。

我还发现，在第一个换行符/换行符之后，如果继续增加边距，那么容器不再被限制在屏幕上；它不会换行，而是移出屏幕。

简而言之，内联块移动到新行的原因是因为边距足够大，可以将其推到查看窗口之外，因此浏览器通过将其移动到新行来修复它强>。边距从上一个对象/块开始，但如果它移动到新行，则窗口左侧是上一个对象。如果你进一步增加边距，在它移动到新行之后，而不是移动到另一个新行，它将移出屏幕边缘（如上图右下角所示） .

【讨论】：