<!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的正方形，但是这段代码运行后的结果图形为什么父元素的宽度是平铺的？
