What inherits average value in CSS?

Question

I often use background: inherit; . Similarly, many other CSS properties accept inheritance as a value.

But what does inherit mean? How it works?

Answer 1

inherit simply means that the style will be inherited from the parent element. 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 , as a rule, will not do you much good, and, as a rule, gives the same thing as the transparent background by default. In the above example, nothing is added, it places a blue background on top of a blue background, the main purpose of inherit used for certain default values, such as color and font-size .

Answer 2

It does what inheritance does at all .. which inherits the property of the parent element

let's say we follow 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 topic. What does the inherit keyword do in CSS?