What Does the Inherit Keyword in CSS Do

What does the inherit keyword in CSS do?

It will use the same value as the same property its parent has.

body {
   margin: 234px;
}
h1 {
   margin: inherit; /* this equals 234px in this instance */
}

<body>
   <h1></h1>
</body>

If there are multiple instances of <h1> in the file, it will take the margin of its parent, so 234px is not always the value it will have. For example:

<body>
    <h2></h2>
    <div>
        <h2></h2>
    </div>
</body>

body {
    margin: 20px;
}
div {
    margin: 30px;
}
h2 {
    margin: inherit; /* 20px if parent is <body>; 30px if parent is <div> */
}

What does inherit mean in CSS?

inherit means simply that the style will be inherited from the element's parent. For example:

jsFiddle

HTML

<div class="blue">
    <div class="inherit">I also have a blue background!</div>
</div>

CSS

.blue { background: blue; }
.inherit { background: inherit; }

Using inherit on background will normally not do you much good however, and normally produce the same as the default of a transparent background would. The above example adds nothing really, it puts a blue background on top of a blue background, the main purpose of inherit is for use in certain default values like with color and font-size.

What's the difference between CSS inherit and initial?

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

What is the purpose of using font: inherit?

Like the other answers have said, it’s to inherit a CSS property from the parent element.

What the other answers have failed to say is why you’d need this. Because, after all, CSS properties are inherited anyway, right?

Well, no. Most are, by default (but link colour isn’t inherited from the parent element, for instance). But consider this case:

p { color: blue; }

div.important { color: red; }

<div class="important">
    <p>This is a text</p>
</div>

Now the text will be blue, not red. If we want the <p> to have its parent’s styling rather than its default styling, we have to override its CSS. We could of course repeat the property value (red) but that violates DRY (don’t repeat yourself). Instead, we inherit it:

div.important p { color: inherit; }

How does CSS inherit behave?

it is because the initial color of attrubutes are black, same with

here is an example from w3schools where they set the color of the division to red, but using initial resets h1 to the base color of attributes.

div {    color: red;}
#initialH1Color {    color: initial;}

<div><h1 id="initialH1Color">this will be initial color</h1><h1>this will be div color: red</h1></div>

CSS height: 100% vs height: inherit

height: 100% will match the height of the element's parent, regardless of the parent's height value.

height: inherit will, as the name implies, inherit the value from it's parent. If the parent's value is height: 50%, then the child will also be 50% of the height of it's parent. If the parent's size is defined in absolute values (e.g. height: 50px), then height: inherit and height: 100% will have the same behaviour for the child.

How do I set a value of `inherit` to a CSS custom property?

I did some thinking and this solution just hit me. I can use custom properties in conjunction with preprocessor mixins.

<style type="text/less">
  // NOTE: not syntactically valid CSS!
  .mx-border(@arg) {
    border: @arg;
  }
  figure {
    .mx-border(1px solid red);
    --foobar: 1px solid green;
  }
  figure > figcaption {
    .mx-border(var(--foobar));
  }
  figure > figcaption:hover {
    .mx-border(inherit);
  }
</style>
<figure>this figure has a red border
  <figcaption>this figcaption has a green border
    because it inherits --foobar</figcaption>
</figure>
<!-- on hover -->
<figure>this figure has a red border
  <figcaption>This figcaption
    has a red border because the mixin
   sets the `border` property to `inherit`.</figcaption>
</figure>

This way, I can encapsulate all the dependent styles into the .mx-border() mixin. Doing this doesn’t take advantage of CSS custom properties, but it does alleviate the hassle of writing everything a second time for the :hover.

Essentially it is the same as writing border: inherit;, with the added ability of putting more styles into the mixin and not having to duplicate them.

Example of css inherit keyword

Let's say we want all of our anchor text to be orange:

a { color: orange }

And we want all of our div text to be green:

div { color: green }

What if we want anchors within divs to also be green? Here, we can use inherit:

div > a { color: inherit }

The following HTML snippet might make this clearer:

<a href="#">I'm orange</a>
<div>I'm green!</div>
<div>I'm green and <a href="#">green</a>!</div>

What Does the Inherit Keyword in CSS Do