[SOLVED] Child element inherits percentage instead of computed value

Child element inherits percentage instead of computed value

I'm stumped by the following:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            width: 1000px;
        }
        article {
            padding: 10%;
        }
        section {
            padding: inherit;
        }
    </style>
</head>
<body>
    <article>
        <section>
            <p>Hello world</p>
        </section>
    </article>
<script>
    const section = document.querySelector("section");
    const style = getComputedStyle(section);
    console.log(style.paddingTop); 
</script>
</body>
</html>

The article element's padding value is 100px (10% * 1000px). The section element is supposed to inherit that computed value, but instead all browsers show that element's padding value as 80px. Since the content width of the article element is 800px, it would seem that section is inheriting 10% * 800px = 80px. Can anyone tell me what's going on here?

Solution

The section element is supposed to inherit that computed value,

Yes, but not all the computed values are the same. Percetange is one particular case where the value inherited is the percentage itself.

However, for some properties (those where percentages are relative to something that may require layout to determine, such as width, margin-right, text-indent, and top), percentage-specified values turn into percentage-computed values. ^ref

The specified value 10% is the inherited value and not 10% * 1000px