<style type="text/css">
* {
box-sizing: border-box;
}
#max-box {
width: 500px;
height: 500px;
background-color: aliceblue;
margin: 0 auto;
/*position: relative;*/
/*padding: 10px 10px;*/
}
#min-box {
/*position: absolute;*/
width: 300px;
height: 300px;
background-color: #4169E1;
margin: 30px 100px 100px;
}
</style>
<body>
<p id="max-box">
<p id="min-box">
</p>
</p>
</body>
如图、我并没有给父元素 max-box 加 margin，但是也被撑高了
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
首先，这和
box-sizing无关，无论是否设置，都会发生题主所说的情况。这个现象叫做外边距合并（Collapsing Margins），在w3c的css2.2规范文档 - collapsing margins中提到了：
这里提到的就是垂直外边距发生合并的条件，它们必须同时满足。题主的例子里，就属于"top margin of a box and top margin of its first in-flow child"的情况，此外，它们之间没有任何行内文字，内边距等“隔离元素”，因此会变成这样。
对应的，只要改变一些状态，就可以避免垂直外边距合并，题主注释掉的
position: absolute;就是其中一种。这个是CSS样式margin叠加的问题：
如果相邻两个元素都有margin，那么间距会取两者较大的作为间距距离；
同理，对于包含的两个元素也一样，特殊的是如果包含的两个元素，父元素没有margin，而子元素有margin，并且父元素没有border和padding的话，那么子元素的margin会溢出到父元素外，要解决这个问题有很多方法，如设置1px的padding，或者设置透明的border等方法来防止margin溢出。
给父级元素设置：overflow：hidden；
小的p的margin-top是30px
不是因为box-sizing的问题，min-box的margin-top为30px,会影响父级元素跟着一起有一个margin-top，给max-box添加一个overflow：hidden；就可以了
有关 margin 折叠的细节和用法Collapsing Margins