Where does an element with a property of inherit get its value from if ascendants also have that pro-CodePudding

To my understanding, if a property is not declared for an element in the DOM during the cascade, then a specified value, inherit or initial, will be used for the property. The reasoning behind having specified values is so that all properties will end up with some sort of value.

So I got curious, if an element has a property with a specified value of inherit, and all of its ascendants also have a specified value of inherit, where does the original element get its value from?

MDN says the root element of the document (html element) will always have the initial value for its specified value. This would make sense, as the inherits from the original element would propogate up until it reaches the html element, which would have initial as the value for the property, then the original element would take on this initial value.

<!DOCTYPE html>

<html lang="en">
<body>
        <h2>Contact Form</h2>
</body>

</html>

e.g Given this HTML document, the h2 element has no user agent declarations and I haven't added any author declarations for the property of text-align. text-align has a specified value of inherit, so it tries to inherit from the text-align of the body element, which itself has a value of inherit. The body element then tries to inherit the text-align value from the html element, but since the html element is the root element, its text-align value is initial which is to align leftwards, so then the body element inherits that initial value from html, and the h2 inherits that initial value from the body element.

Now, I then got curious and decided to experiment with what would happen if I set the html element's text-align to inherit as well, where would the h2 element get its text-align value from then?

html {
    text-align: inherit;
}

The h2 element seems to just go with the 'initial' value of text-align. Can someone explain this?

CodePudding user response：

From the specification:

For the root element, which has no parent element, the inherited value is the initial value of the property.