What exactly is the difference between inherit
and initial
in terms of CSS? For me they always worked the same, for example:
a.no-style{color: inherit}
will do the same as
a.no-style{color: initial}
The inherit CSS keyword causes the element to take the computed value of the property from its parent element. It can be applied to any CSS property, including the CSS shorthand property all . For inherited properties, this reinforces the default behavior, and is only needed to override another rule.
The initial keyword is used to set a CSS property to its default value. The initial keyword can be used for any CSS property, and on any HTML element.
If you don't need to use inheritance, you use the value initial . That given CSS property sets the default value given in the specification.
The initial value of a CSS property is its default value, as listed in its definition table in the specification. The usage of the initial value depends on whether a property is inherited or not: For inherited properties, the initial value is used on the root element only, as long as no specified value is supplied.
The initial value given in the summary of the definition of each CSS property has different meaning for inherited and non-inherited properties.
For inherited properties, the initial value is used, for the root element only, when no value is specified for the element.
For non-inherited properties the initial value is used, for any element, when no value is specified for the element.
An initial keyword is being added in CSS3 to allow authors to explicitly specify this initial value.
The inherit keyword means use whatever value is assigned to my parent.
Source : https://developer.mozilla.org/en-US/docs/Web/CSS/initial_value
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With