Why the border property effect the frame of the element?

Question

I have a simple code below:

* {
  box-sizing: border-box;
}

.div1 {
  /*border:1px solid black*/
}

.div2 {
  margin-bottom: 8px;
}

.div3 {
  height: 30px;
}

<div class="div1">
  <div class="div2">
    <div class="div3">Hello
    </div>
  </div>
</div>

I run the code then I press F12 and I realise that when I move the mouse on the F12's window to the class div1, the frame size of class div1 is changed when I uncomment/comment the border command in class div1. The unexpected here is the frame size of div1 should include the margin of the div2.

So how it happens? Thanks in advance .

Answer 1

The rules of margin collapsing: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-top of a block from the margin-top of one or more of its descendant blocks; or no border, padding, inline content, height, or min-height to separate the margin-bottom of a block from the margin-bottom of one or more of its descendant blocks, then those margins collapse. The collapsed margin ends up outside the parent.