一个面试题衍生出来的问题。

Question

问题原题：
现在有一个div，给它加上width:200px，padding-top:20%那么现在这个div多高？

这个问题我搞清楚了这个20%是以父级元素作的width为参考，如果父级都没有设置width就以浏览器的可视区域的width做为参考。

现在的问题是：

这种情况我发现只有设置有padding-top或者padding为百分比的时候出现，我想问问为何会出现这种设置了padding-top或者padding为百分比的时候padding的值会以父级元素的width做为百分比的参考？是什么导致了这个情况？