關於chrome dev tool顯示margin的小疑問

我今天有個html element長這樣

<div class="box"></div>

再有content area有高度的情況下給他margin-bottom會照預期般的渲染.

.box {
  /* 有給content area內容 */
  height: 100px;
  background-color: pink;
  /* margin的部分 */
  margin-bottom: 100px;
}

在content area沒高度的情況下會出現一個莫名其妙的空白.

.box {
  /* 沒給contnt area內容 */

  
  /* margin的部分 */
  margin-bottom: 200px;
}

想請問各位大大發生這種狀況的原因為何?