Setting color: #1a1a1a; on the body is usually enough to colour every piece of text on the site, without ever touching a single other element directly. Setting margin: 40px; on that same body, however, gives no margin at all to the paragraphs it contains. The same CSS mechanism explains both opposite results: inheritance.
Knowing which properties inherit and which never do avoids two common mistakes: writing a redundant rule on every child when one on the parent would have been enough, or expecting a child to inherit a property that simply does not work that way.
Definition
CSS inheritance is the mechanism by which an element picks up, for certain properties only, the computed value of its parent whenever no rule gives it one explicitly. It is not a general propagation: every CSS property is classified once and for all, in the specification, as either inherited or not inherited.
body {
color: #1a1a1a;
font-family: system-ui, sans-serif;
}
/* no span, p or li needs to repeat
these two lines: they already inherit them */The Cascade decides which rule applies when several compete for the same element; inheritance only steps in when no rule applies at all, and looks up a value from the parent instead of falling back to the browser's own default.
What inherits, and what never does
The general rule is easy to remember: anything about text inherits, anything about the box does not.
| Inherits | Never inherits |
|---|---|
CSS color (color) | margin |
font-family, font-size, font-weight | padding and border |
line-height, text-align | background and background-color |
visibility, cursor | width, height, display, position |
That list is not arbitrary: it tracks a real distinction between what describes text, which makes sense applied uniformly across a whole paragraph, and what describes a box, which needs to stay specific to each element.
Why the choice is deliberate
Imagine margin inherited the way color does. Every nested div would pick up its parent's margin on top of its own, and the gap between two blocks would keep growing at every level of nesting with no explicit rule asking for it. Layout would turn unpredictable the moment a component moved from one level to another.
The other way round, if color did not inherit, the text colour would need repeating on every single tag, including inside a link, a span or a list item, turning the smallest rebrand into an endless task. Inheritance serves typographic consistency without ever threatening the structure of the layout.
button, input, select, textarea) are the exception: most browsers give them a default font that ignores the site's inherited font. Add font: inherit; on these elements if you want them to actually follow the typography set higher up.Forcing or blocking inheritance
A non-inherited property can still be told to take the parent's value, with the inherit keyword. That is exactly what font: inherit; does above: it forces inheritance on a property that does not get it by default. Conversely, a child can break an ongoing inheritance chain by reasserting its own value, which stops the transmission for itself and for its own children in turn. CSS-wide keywords cover these cases in more detail, with three other keywords that complement inherit.
Frequently asked questions
body?Because form elements do not follow the usual inheritance of font and colour: browsers impose their own default styling on them. The common fix is writing button, input, select, textarea { font: inherit; color: inherit; } once in the global stylesheet.
border on a container, do its children get a border too?No, never: border is not part of any version of the inherited properties list. Only the element the rule is written on receives the border; its children never inherit it, not even indirectly.
By explicitly giving it the value inherit, for instance background-color: inherit;. The element then looks up its parent's computed value for that exact property, exactly as if it were inherited by default.