"initial" on inherited property

"color" is an example of a inherited property.

If you assign "red" to the color of the parent div, then the child div inherits it.

If you want to use the inital value instead of the inherited value in the child box, then assign "initial" to the child box.

initial will reset the property back to the spec default.

"inherit" on non-inherited property

The initial value is used on every non-inherited property.

"width" is an example of a non-inherited property.

In the example below, the child box won't inherit the width and height of the parent box

If you assign width:inherit;height:inherit; to the child box, then it will inherit width and height from it's parent.

What is unset?

unset == inherit if the property is a inherited property such as "color"
unset == initial if the property is a non-inherited property such as "width"

The unset CSS keyword resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not. In other words, it behaves like the inherit keyword in the first case, when the property is an inherited property, and like the initial keyword in the second case, when the property is a non-inherited property.

What is revert?

revert == inherit if the property is a inherited property such as "color"
revert == "the UA stylesheet" if the property is a non-inherited property such as "width"

The revert CSS keyword is similar to unset but if the perperty is a non-inherited property, then it reverts back to the user agent stylesheet instead of the initial value.

So what's the difference between the initial value and the user agent stylesheet?
(Note: "user agent" in this context means "web browser")

What is the user agent stylesheet?

https://blog.webdevsimplified.com/2021-05/initial-inherit-revert-unset/
In order to understand a bit more how this works we need to talk about the three layers of CSS, default/initial styles, browser styles, and custom styles.

The first layer:

The default or initial styles are just the default values of every CSS property defined in the CSS specifications. These can easily be found by checking the documentation for any CSS property on MDN.

This is what the initial CSS keyword assigns. 

Suprizingly, the default value of the display property of div is inline ( NOT block! )

The second layer:

The second layer is the user agent stylesheet. And this layer explains why a button in Chrome looks different from the one in Safari.

The third layer:

The third layer is the CSS that a coder puts in a webpage as inline CSS or a stylesheet file.