Inherit - Value CSS

inherit

Summary of characteristics of the inherit value

Quick description
Sets a property to the same value as the parent element.
Status
Standard
W3C Module
CSS Cascading and Inheritance
References (W3C)
 🡇  
 🡅  
Document status: CR (Candidate Recommendation)
Document status: CR (Candidate Recommendation)
Document status: REC (Recommendation)
Document status: REC (Recommendation)

The value inherit.

When a property is set to the inherit value, it takes on the same value as the equivalent property of the parent element. The parent element is the one that, in the DOM tree, is above the element in question.

The inherit value is mostly used to re-enable the inheritance mechanism when a property has previously been set to a different value. It can also enable inheritance on a property that is not inherited by default.

See also unset, initial, revert, and revert-layer.

The inherit value and relative values.

Relative values are values that are calculated from another value. The most common example is the percentage.

Typically, the inherit value retrieves the calculated value of the parent element. The calculation is therefore not redone on the element itself.
For example, consider a font size set to 2em on the parent element. Which gives let's say 24 pixels. Child elements will inherit the calculated value (24 pixels) and not the 2em, which would ultimately give a 48 pixel font on kids.

There are, however, exceptions to this rule. Dimension properties (width, margin, etc.) inherit the defined value, which therefore causes the children to recalculate the value in order to determine the value.

Example :

The left margin of this parent block is set to 25%
The left margin of this child element is set to inherit. We can clearly see that the calculation has been redone since the left margin does not have the same value as that of the parent element.

Examples and practical cases.

Example 1.

Force the inheritance mechanism on a property that by default does not inherit its value. This is the case of background-color.

#example1
Parent Block.
#exemple1a
The background color of this block has not been changed. Its initial value is transparent.
#example1b
The background color of this block is set to inherit. The color is therefore the same as that of the parent block.

Browser support (compatibility).

The inherit value is very well recognized by all current browsers.

1
inherit
value
Estimated overall support.
96%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.
Caniuse

The history of the inherit property.

The inherit value is also cited in the CSS Values and Units level 3 and 4 modules.

See also, about values.

The CSS specifications published by the W3C are organized into modules. The inherit property is part of the CSS Cascading and Inheritance module. The following definitions are also described in this same module.

Properties:

all
Initialize all properties.

At-rules:

@import
Langue française
Importing a style sheet.
@layer
Langue française
Defines cascade layers to help manage priorities between CSS rules.

Values:

!important
Makes a rule priority over all others.
initial
Restores a property to its original value.
revert
Sets a property to the value set by the browser.
revert-layer
Restores a property's value to the value it had in the previous layer.
unset
Gives a property the value it would have had if no style had changed it.