Menu
Can somebody please explain what the inherit keyword means in CSS and how it works?
335
The inherit keyword can be used for any CSS property, and on any HTML element.
When you set inherit on a CSS property, the property takes the value from the element's parent. This applies not only to inheritable properties, but to all CSS properties. The div1 has a height set to 100px and a color set to red . The color will be inherited by the child elements.
Unfortunately, CSS does not provide 'inheritance' in the way that programming languages like C++, C# or Java do. You can't declare a CSS class an then extend it with another CSS class.
Each property may also have a cascaded value of 'inherit', which means that, for a given element, the property takes as specified value the computed value of the element's parent. The 'inherit' value can be used to enforce inheritance of values, and it can also be used on properties that are not normally inherited.
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> */ } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
