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

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>

(note: the target window is 400px*300px, so if you run the snippet it will look different to the images below. You can fix this by minimising and adjusting the viewport size.)

I have just started learning CSS and was playing around. On CSS battle challenge 1, part 2: Carrom, I noticed something odd: when I change 'This Value' to 79.3 the <div> moves unexpectedly from
to

Why is this? Why doesn't it move off the right edge of the body: there are no div blocks afterwards that define its position? Alternatively, why doesn't the inline-block start against the left edge of the viewing window, like the image below?

inspect the code to see that margin+element width cannot fit inside the previous line so it goes to the second one — Temani Afif
@TemaniAfif But why doesn't it go to the new line, on the far left? Why does it appear to jump horizontally? — Thomas Stokes
it's going to the new line, not sure whay you mean by jump but your element is on a new line — Temani Afif

Thomas Stokes Thomas Stokes · Accepted Answer · 2021-06-28T21:53:52

The margin is marked in orange. In the right image, I used 221px as the margin, while on the left I used 222px; the increase in margin made the green box (<div id='d'></div>) moves to a new line. I expected it to be just barely on the new line, with the margin starting from the previous <div> and continuing just barely onto the new line, because the change is only 1px. However, once the margin measurement and element width is too great for the inline-block to fit, it moves to a new line and the margin starts at the left edge of the body.

I also found that, after the first newline/linebreak, if you continue to increase the margin, then the container is no longer constrained to the screen; it won't go onto a new line, but instead moves off the screen.

In short, the reason the inline-block moves to a new line is because the margin was large enough to push it outside of the viewing window and so the browser fixes it by moving it to a new line. The margin starts from the previous object/block, but if it moves to a new line, then the left side of the window is the previous object. If you then increase the margin further, after it has moved to a new line, rather than moving onto yet another new line, it will move off the edge of the screen (as can be seen in the above image, in the bottom right).

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

1 Answers