devtool elements, 橙色部分是margin吗？

Question

(初学前端，请多包涵

为什么这里不显示大小？

---

经提醒，到Firefox试了一下

Firefox这个margin的黄色（对应chrome的橙色）就没显示在右边。。。这个才是正确的实现

<style>
  .grandfather {
    border: 2px solid red;
    width: 300px;
    height: 300px;
  }

  .father {
    width: 200px;
    height: 200px;
    background-color: yellow;
  }

  .son {
    margin: 2em 0;
    background-color: pink;
  }
</style>

<div class="grandfather">
  <div class="father">
    <div class="son">this is son</div>
  </div>
</div>

Answer 1

margin没有设置或者设置为0的时候就这样显示的吧

Answer 2

没啥问题吧

Answer 3

chrome里显示-，火狐里就显示的0，就是浏览器对于0的显示形式不一样而已，不必纠结

Answer 4

我今天又想了想
这应该就是Chrome devtool的一个bug或者说实现的不严谨(96版本)
Firefox的实现是正确的

右边的橙色margin，是0px，是不应该显示的