What does inherit mean in CSS?

css

Solution

`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`.

Problem

I often use `background: inherit;`. Like this, many other CSS properties accept inherit as a value. But what does `inherit` mean? How does it work?

Original source

Related problems