Margin Collapsing can cause not-visible shifts to elements

[mmocny]

Margin collapsing can sometimes turn a small shift on a child element into a large shift on a parent/sibling element.

For example:

• Visit this demo https://cls-iframe-problem.glitch.me/iframe.html

• Using console, modify the margin:

  document.querySelector('body > :first-child').style.marginTop = "100px";

Visually-- only the two colored elements shifted.

But, actually the body element experienced "margin collapsing", which technically meant the whole body shifted down.

(It's not so much that the shift didn't happen, technically it did, but it's not exactly producing the result we would expect. In the example, only the two child elements visually shift.)

However, if you apply e.g. a Border to the body, that disabled margin-collapsing and the (more visually) correct CLS is reported.