Skip to main content

Which properties are inherited by default?

CSSJunior~1 min read
Suggest an edit

By default, mostly typography, text, and a few properties related to visibility and the cursor are inherited. Key groups:

Inherited:

Text and fonts

  • font-size
  • font-family
  • font-style
  • font-weight
  • line-height
  • letter-spacing
  • word-spacing
  • text-align
  • text-transform
  • text-indent
  • white-space
  • text-shadow

Color

  • color

List

  • list-style, list-style-type, list-style-position, list-style-image

Table and block-level text features

  • quotes

Cursor and interaction

  • cursor
  • visibility

Others

  • pointer-events (partially)
  • direction

Not inherited:

  • margin, padding, border
  • width, height
  • display
  • position, top/right/bottom/left
  • background-*
  • flex-*, grid-*

Conclusion

The properties that are inherited are the ones it makes sense to pass to children for consistent text styling, while anything that affects the box model, sizing, and positioning is not inherited.

If you need to force a property to inherit, you can set:

css
property: inherit;

And to reset it to its initial value:

css
property: initial;

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit
Which properties are inherited by default?: CSS Interview Question