Inheritance: What Passes Down and What Doesn't

Inherited vs. Non-Inherited Properties

Some CSS properties automatically pass their value from a parent element to its children. Typography properties — color, font-family, font-size, line-height — are inherited. Layout and box-model properties — margin, padding, border, width — are not inherited.

/* Setting font-family on body propagates to ALL text descendants */
body {
  font-family: 'Inter', system-ui, sans-serif;
  color: #1a1a1a;
  line-height: 1.6;
}

/* Force inheritance for a non-inherited property */
.inherit-border {
  border: inherit;
}

/* Reset an inherited property to its initial value */
.reset-color {
  color: initial;
}

The special keywords inherit, initial, unset, and revert let you explicitly control how a property's value is determined. inherit forces inheritance; initial resets to the browser's built-in default; unset behaves like inherit for inherited properties and initial otherwise.