父元素加padding为什么上下左右距离不一样？

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
            #box1{
                  width: 100px;
                  height: 100px;
                  background-color: aqua;
            }
            #box{
                  padding: 30px;
                  background-color: brown;
            }
      </style>
</head>
<body>
      <div id="box">
            <div id="box1"></div>
      </div>
</body>
</html>

比如我给子元素box1设置成为一个宽高各是100px的正方形，给父元素没有设置宽高，只设置padding=30px值，最终的表现形式应该是父元素是一个宽高各为130px的正方形，但是这段代码运行后的结果图形为什么父元素的宽度是平铺的？

我们想一下

box1的宽和高度都是100px

但是呢？

最外成的padding 为30px

上下是可以设置padding 为30px的

左右的话想一下，怎么可能同时两边padding 设置为30px

所以只能把最左边的padding 设置为30px了

okay~

同样是生效的打开开发者模式看一下，可以看到box的padding。