首先，这和box-sizing无关，无论是否设置，都会发生题主所说的情况。

这个现象叫做外边距合并（Collapsing Margins），在w3c的css2.2规范文档 - collapsing margins中提到了：

Two margins are adjoining if and only if:

• both belong to in-flow block-level boxes that participate in the same block formatting context

• no line boxes, no clearance, no padding and no border separate them

• both belong to vertically-adjacent box edges, i.e. form one of the following pairs:

  • top margin of a box and top margin of its first in-flow child
    ...

这里提到的就是垂直外边距发生合并的条件，它们必须同时满足。题主的例子里，就属于"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