Inheritance

ancestors

Certain styles can be inherited from a containing element, that is, an ancestor in a tree. A style is inherited only when no declaration for that aspect applies directly to the element itself.

If there are multiple ancestors with properties that can be inherited, the closer the ancestor, the higher the priority. That is, a declaration for the parent will have priority over a declaration for the parent of the parent, which will have priority over a declaration for the parent of the parent of the parent, and so on.

This illustration depicts part of the tree representation of the main element in a document; the dashed red arrows indicate that the tree continues downwards. The yellow paragraph element has three ancestors depicted in the illustration, and above them the body element and html element of the document (not shown in the illustration). The article element will have highest priority, followed by the section element, and then the main element. After that the body element and html element would be considered.

None of the following can be inherited:

  • margins
  • padding
  • borders
  • background colours
  • properties related to positioning