For what reason are the padding and margin properties calculated relative to the width of the parent element?

Declared values with percentage usage are calculated, for all four sides, relative to the width of the parent element.

See the following HTML:

<div class="pai">
    <div class="filho"></div>
</div>

<div class="pai pai-gordo">
  <div class="filho"></div>
</div>

The following CSS:

.pai {
    display: inline-block;
    width: 100px;
    height: 300px;
    background-color: blue;
    margin-right: 10px;
}

.pai-gordo {
    width: 200px;
}

.filho {
    background-color: red;
    width: 50px;
    height:
    padding-top: 50%;
}

And the result:

The child elements have the same class filho , that is, both have the same padding as a percentage:

padding-top: 50%;

However, the result shows that the child of the pai-gordo element takes up more vertical space than the child of the pai element, because the pai-gordo element is wider and padding-top will be 50% width of the father.

But, for what reason are the padding and margin properties calculated relative to the width of the parent element?