Inheritance

HTML and CSS define inheritance as direct "parent to child" relationships.

No skipping generations; it is strictly a top-down relationship. Child elements cannot inherit directly from their grandparents or other ancestors. Parent elements cannot inherit from their children or other descendants.

Test resize your browser.
(A)
(B)
  • set width:50% = 50% of parent (A)
(C)
  • set width:50% = 50% of parent (B)
  • set color:red
(D)
  • set width:auto = 100% of parent (C) (not including padding and margin)
  • inherited color from (C)