From time to time when browsing through stylesheets, I have seen rules such as the following:
padding: 10px inherit;
I didn't know if this was valid CSS so I made 3 JSFiddles. All 3 fiddles have a <p> child of a <div> parent (and were tested in Chrome 59.0). In the first JSFiddle, the child inherits the parent padding (a single inherit keyword) and inspection of the elements show both <p> and <div> have 10px padding in both the x- and y-directions:
div {padding: 10px 10px}
p {padding: inherit}
In the second JSFiddle, the child <p> has both x and y padding explicitly inherited (1 actual <length>, 1 inherit keyword):
div {padding: 10px 10px}
p {padding: 10px inherit}
Inspection of <p> shows the CSS has broken (i.e., no padding inherited);
In the third JSFiddle (for completeness), the child <p> also has both x and y padding explicitly inherited, but in this case there are 2 separate inherit keywords:
div {padding: 10px 10px}
p {padding: inherit inherit}
and this CSS also breaks for <p> (i.e., no padding inherited)
I am assuming this means that child elements cannot "partially" inherit parent property values using shorthand. Is this correct, and if so, why can it not be partially inherited? (i.e., do the W3C docs mention this somewhere?).
UPDATE - If you split the padding property explicitly (don't use shorthand), you CAN inherit (see this JSFiddle)
Considering that I have seen case #2 (second Fiddle) in several stylesheets, it looks like other developers also think partial inheritance is valid.