为什么边距底边不会增加父元素的大小？

Question

这是我从未理解的问题。可以说我有一个容器，并且该容器中有一个或几个div。如果最后一个项目的底边有边距，则如果容器没有底边或边框，则不会增加容器的大小。

该示例显示了一些解决方法，但我不知道为什么浏览器或规范会如此操作。

.item {
  height: 20px;
  background: red;
  margin-bottom: 10px;
}

.container {
  padding: 10px;
  padding-bottom: 0;
  background: blue;
  margin-bottom: 20px;
}

.container2 {
  padding: 10px;
  padding-bottom: 0.1px;
  background: green;
  margin-bottom: 20px;
}

.container3 {
  padding: 9px;
  padding-bottom: 0;
  border: 1px solid green;
  background: green;
  margin-bottom: 20px;
}

<div class="container">
  <div class="item">
  </div>
  
  <div class="item">
  </div>

  <div class="item">
  </div>
</div>

<div class="container2">
  <div class="item">
  </div>
  
  <div class="item">
  </div>

  <div class="item">
  </div>
</div>

<div class="container3">
  <div class="item">
  </div>
  
  <div class="item">
  </div>

  <div class="item">
  </div>
</div>