如果边框处于活动状态，背景颜色会达到更多区域

Question

这是我能想到的最好的头衔，对不起，如果不清楚的话。

我有一张桌子，有一个上边距。在那张桌子周围，我有一个蓝色背景的div。这个蓝色背景仅影响表本身，并且不包括边缘区域（考虑到边缘区域应该仍然在该div内部，这似乎很奇怪）。然而，如果我为div添加边框，整个区域（包括边距）将获得该背景。

#table_div {
  background-color: blue;
  border-color: red;
  border-width: 5px;
  border-style: solid;
}

#main_table {
  margin: auto;
  margin-top: 100px;
}

为什么会发生这种情况有什么特别的原因吗？

要获得背景而不必使用边框，我将表格的边距替换为div的填充。我创建这篇文章不是要问如何让它发挥作用，而是真正了解正在发生的事情及其发生的原因

示例：https://jsfiddle.net/jxbmg4vx/1/

删除边框线以查看我的意思