90

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?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Bogdan Verbenets
  • 25,686
  • 13
  • 66
  • 119

4 Answers4

108

Here is the list of all inheritable properies. I'm working with W3C's information, 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
fishinear
  • 6,101
  • 3
  • 36
  • 84
Blender
  • 289,723
  • 53
  • 439
  • 496
  • 12
    Is there any rule of thumb that could be applied to this list? Do the properties have anything in common? – Kaivosukeltaja Apr 10 '11 at 14:46
  • Many of them are for speech, others are for lists and tables. They're kind of random, but have some vague correlation. – Blender Apr 10 '11 at 14:48
  • 5
    @Kaivosukeltaja One rule of thumb that I feel is there- Anything that is done indefinitely will not cause the page to be grabled. Padding indefinitely would cause the depeest element to be have very small space left. Same for margin. – 0fnt Mar 08 '15 at 04:55
  • 5
    Note that the "Inherited" column in that table, as well as each propdef, refers to whether the property is inherited *by default* without the author having to specify the `inherit` value. The `inherit` value can be used to force any property to inherit, including ones where "Inherited" is listed as no. – BoltClock May 22 '15 at 02:28
  • 1
    @TxRegex: You're welcome to edit my answer as you see fit. I don't really keep track of all the changes. – Blender Mar 27 '18 at 20:12
  • 1
    To Kaivosukeltaja, the answer has a link to https://www.w3.org/TR/CSS21/propidx.html which has all the information in the answer in a concise way and more. It has column named :Media Groups" which should answer your (follow-up) question. – Panu Logic Sep 06 '18 at 14:29
  • It's worth noting that the CSS Speech properties are deprecated (`azimuth`, `elevation`, `pitch-range`, `pitch`, `richness`, `speak-header`, `speak-numeral`, `speak-punctuation`, `speak`, `speech-rate`, `stress`, `voice-family`, and `volume`). Firefox has already dropped support for these properties. – CITguy Jul 09 '19 at 17:43
  • is this still current? – oldboy Dec 26 '20 at 09:37
  • 1
    A newer link: https://www.w3.org/TR/CSS22/propidx.html – user90726 Mar 26 '21 at 14:32
  • In my actual experience, I feel that most of the attributes related to fonts will be inherited. – weiya ou Oct 28 '21 at 15:39
24

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
Yatoom
  • 307
  • 1
  • 15
David Bonnet
  • 1,168
  • 11
  • 11
  • I'd be good to update this to modern CSS rather than the css 2.1 spec. – Paul Irish Aug 03 '15 at 16:18
  • To Vincent Tang: See my answer it probably comes from https://www.w3.org/TR/CSS21/propidx.html. Never mind that some anonymous person already downvoted it immediately (without explanation or comment). This link is the best reference I can find. If anybody has a better one I'd love to see it. – Panu Logic Sep 06 '18 at 14:13
16
  • 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

Shaz
  • 15,637
  • 3
  • 41
  • 59
  • 4
    Did you just copy this over from my answer? – Blender Apr 10 '11 at 14:30
  • 6
    @Blender: Nope, I found a slide from [http://www.slideshare.net..css-inheritance](http://www.slideshare.net/maxdesign/css-inheritance-a-simple-stepbystep-tutorial?from=ss_embed) It was listed as a source before you even posted. :) – Shaz Apr 10 '11 at 14:32
  • But you originally had an image. Oh well. – Blender Apr 10 '11 at 14:32
  • 1
    @Blender: Yes, I transferred it to text. I didn't copy/paste yours. No worries. – Shaz Apr 10 '11 at 14:34
  • @Blender note that this answer has `text-index` that should be `text-indent`. – Déjà vu Oct 18 '16 at 04:36
1

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.

Panu Logic
  • 2,193
  • 1
  • 17
  • 21
  • The accepted answer has a link to the exact same resource. – Joseph Webber Sep 06 '18 at 14:06
  • 1
    I see the link now but it does not really really tell you that is the place to go to look up the authoritative answer for yourself. It merely says "I'm working WITH W3C's information". Rather than "working with" it's more like "I copied my list from this official resource". It's useful to point out for the readers that that is the source from which they can find out the exact same information for themselves and possibly more up-to-date information. Just because an answer has been "accepted" doesn't mean it can not be improved upon. – Panu Logic Sep 06 '18 at 14:20
  • If an answer can be improved upon, leave a comment on it saying what you would improve or edit it yourself. – Joseph Webber Sep 06 '18 at 15:20
  • 1
    I think it is better to give a separate alternative answer when you think you have a better one, the original author might be offended if you point out you think there is something "wrong" with their answer. And there's too much negativity on Stack Overflow already. – Panu Logic Sep 06 '18 at 18:52