What does inherit mean in CSS? [duplicate]

Question

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?

Answer 1

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.

Answer 2

It does what inheritance does in general .. that is inherit the property of the parent element

say we have following html

<div>
  <h1>text<h1>
 </div>

and we have css like

 div
  {
    padding : "10px"
 }
 h1
 {
   padding : inherit //10px
 }

since h1 is child of div so will use the value of padding property for div

also see this thread What does the inherit keyword in CSS do?