为什么padding-left和height与padding-bottom和width的工作方式不同？

Question

我正在努力了解幕后发生的事情。 这就是事情。当我给出第一个潜水宽度和填充底部或顶部时，它生效并且框出现。所以我假设我已经选择了宽度，然后通过填充更改高度，并且它以这种方式工作。然而，有了这个想法，我认为通过给予高度和填充 - 左或右，它应该工作相同，但事实并非如此。如果有人向我解释，我真的很感激。

第一个div：

第二个div：

.square{
  background-color: red;
  width: 30%;
  padding-bottom: 30%;
  float: left;
  margin: 1.66%;
}
.square2{
  background-color: blue;
  height: 30%;
  padding-left: 30%;
  float: left;
  margin: 1.66%;
}

	<div id="container">
	<div class="square"></div>
	<div class="square2"></div>
</div>