css - padding-top 不是根据宽度计算的

Question

根据这个 Q/A我总是使用padding-top或padding-bottom维护 div 的纵横比。今天我遇到了简单的结构，它没有以 5/2（w/h）的方式渲染。因为padding-top:40%我期望一个水平矩形，因为它padding-top是根据宽度计算的。为什么这是垂直的？（似乎高度是根据父宽度计算的）

#aspect52 {
    width:30%;
    padding-top:40%;
    background:#ff0000;
    position:absolute;
}

#parent{
    position:relative;
    width:100%;
}

<div id="parent">
    <div id="aspect52"></div>
</div>

标签： css