CODEWITHSUNDEEP
cssinheritance
Bogdan Verbenets
Bogdan Verbenets

Reputation: 26936

Which CSS properties are inherited?

I've noticed that some properties are inherited in CSS, and some are not. For example, the text-size property is inherited, but the padding and margin are not inherited by the child blocks. So how to figure out which properties are inherited, and which are not?

Upvotes: 98

Views: 71631

Answers (4)

Blender
Blender

Reputation: 298106

Here is the list of all inheritable properies. I'm working with W3C's information (updated for CSS 2.1), so I'd guess it should be correct. But knowing web browsers (IE specifically), some of these might not be inheritable by all browsers:

  1. azimuth
  2. border-collapse
  3. border-spacing
  4. caption-side
  5. color
  6. cursor
  7. direction
  8. elevation
  9. empty-cells
  10. font-family
  11. font-size
  12. font-style
  13. font-variant
  14. font-weight
  15. font
  16. letter-spacing
  17. line-height
  18. list-style-image
  19. list-style-position
  20. list-style-type
  21. list-style
  22. orphans
  23. pitch-range
  24. pitch
  25. quotes
  26. richness
  27. speak-header
  28. speak-numeral
  29. speak-punctuation
  30. speak
  31. speech-rate
  32. stress
  33. text-align
  34. text-indent
  35. text-transform
  36. visibility
  37. voice-family
  38. volume
  39. white-space
  40. widows
  41. word-spacing

Upvotes: 118

Panu Logic
Panu Logic

Reputation: 2263

The best reference-page to answer this and similar questions (say which CSS properties are NOT inherited) I've found is:

https://www.w3.org/TR/CSS21/propidx.html

It has a column for "inherited" (or not).

The page says "Several Sections of this specification have been updated". But I can't find a more up-to-date version of this anywhere, listing all CSS properties in a single concise table. But this table I think is great, just what I was looking for. Answers also the question of what are the possible values for each CSS-property, and the initial (= default) value.

If you want to see all inherited or non-inherited properties grouped together you could copy the text from the web-page and insert it into Excel etc. then sort it based on the column "Inherited?". It works I tried it.

Upvotes: 1

Shaz
Shaz

Reputation: 15867

  • azimuth
  • border-collapse
  • border-spacing
  • caption-side
  • color
  • cursor
  • direction
  • elevation
  • empty-cells
  • font-family font-size
  • font-style
  • font-variant
  • font-weight
  • font
  • letter-spacing
  • line-height
  • list-style-image
  • list-style-position
  • list-style-type
  • list-style
  • orphans
  • pitch-range
  • pitch quotes
  • richness
  • speak-header
  • speak-numeral
  • speak-punctuation
  • speak
  • speech-rate
  • stress
  • text-align
  • text-indent
  • text-transform
  • visibility
  • voice-family
  • volume
  • white-space
  • widows
  • word-spacing

Source

Upvotes: 16

David Bonnet
David Bonnet

Reputation: 1218

Blender's and Shaz's lists both enumerate all the inherited CSS 2.1 properties, including those for aural media such as azimuth. Here below is a list without the aural-oriented properties, now including CSS3 properties.

  1. border-collapse
  2. border-spacing
  3. caption-side
  4. color
  5. cursor
  6. direction
  7. empty-cells
  8. font-family
  9. font-size
  10. font-style
  11. font-variant
  12. font-weight
  13. font-size-adjust
  14. font-stretch
  15. font
  16. letter-spacing
  17. line-height
  18. list-style-image
  19. list-style-position
  20. list-style-type
  21. list-style
  22. orphans
  23. quotes
  24. tab-size
  25. text-align
  26. text-align-last
  27. text-decoration-color
  28. text-indent
  29. text-justify
  30. text-shadow
  31. text-transform
  32. visibility
  33. white-space
  34. widows
  35. word-break
  36. word-spacing
  37. word-wrap

Upvotes: 28

Related Questions