CSS Inheritance Enforced inheritance

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Extensions
> Step 2: And Like the video. BONUS: You can also share it!

Example

Some properties are not automatically inherited from an element down to its' children. This is because those properties are typically desired to be unique to the element (or selection of elements) to which the property is applied to. Common such properties are margin, padding, background, display, etc.

However, sometimes inheritance is desired anyway. To achieve this, we can apply the inherit value to the property that should be inherited. The inherit value can be appied to any CSS property and any HTML element.

Assume the following stylesheet:

#myContainer {
  color: red;
  padding: 5px;
}
#myContainer p {
  padding: inherit;
}

This will apply color: red to both the <h3> and <p> elements due to the inheritance nature of the color property. However, the <p> element will also inherit the padding value from its' parent because this was specified.

<div id="myContainer">
  <h3>Some header</h3>
  <p>Some paragraph</p>
</div>


Got any CSS Question?