Which properties inherit and which don't? Explain the inherit, initial, unset, and revert keywords.
Whether you understand default inheritance and the four global CSS-wide keywords.
Some properties inherit by default — mostly text-related ones: color, font-family, font-size, line-height, text-align, visibility, list-style, white-space. Most box/layout properties do NOT inherit: margin, padding, border, width, height, background, display, position — otherwise a container's border would repeat on every child. The four CSS-wide keywords let you override this per property: `inherit` forces a property to take the parent's computed value (useful to make a normally-non-inheriting property, e.g. border-color, follow its parent). `initial` resets to the property's SPEC default (its defined initial value, independent of any stylesheet) — note the spec default for color is black, not necessarily what you expect. `unset` is the smart one: it acts like inherit if the property naturally inherits, otherwise like initial. `revert` rolls back to the value the USER-AGENT (browser) stylesheet would give — so revert on display restores <div>'s block, unlike initial which would give inline. Practical use: `all: unset` on a button strips inherited and default styling to build a clean custom control; individual keywords fix one-off cascade surprises.
Stripping inherited styles from custom controls (all: unset), or forcing/resetting a single property with inherit/initial.