Why can't CSS padding be partially inherited using shorthand?

Question

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.

Answer 1

The spec presesnts three options for a property unset,all and inherit https://www.w3.org/TR/css3-cascade/#propdef-all It even says initial | inherit | unset. It means these values in a literal sense. Because it wouldn't make sense to define backround:url('url.png') inherit;. This is a hard coded example of how the engine works internally. It is sort of like defining partial importance like padding:20px !important 10px;. No you have to do padding:!important 10px;

Answer 2

While I don't know why this is the case, you can do the following trick:

div {padding: 10px 10px}
p {
  padding: inherit;
  padding-bottom: 20px;
  padding-top: 20px;
}