I am not sure about the differences in these three and more as to why they would be used at all. By default, an element would inherit the text of the parent so why even have that? I am new so I am clearly missing something.
some properties are inherited, but some values such as margin are not.
In the case of automatically inherited properties, initial comes in handy to reset the child element to the browser default value. (e.g. changing the color of the child back to default)
In the case of not automatically inherited properties, inherit comes in handy to take the value from the parent. (e.g. taking display:block from parent)
Any css property with the value of none will have no value, instead of inheriting from parent or browser default.