为什么不能使用速记部分继承 CSS 填充？

Question

在浏览样式表时，我时常看到如下规则：

padding: 10px inherit;

我不知道这是否是有效的 CSS，所以我做了 3 个 JSFiddles。所有 3 个小提琴都有一个 <p> 父级的 <div> 子级（并在 Chrome 59.0 中进行了测试）。在first JSFiddle 中，子级继承父级填充（单个inherit 关键字），检查元素显示<p> 和<div> 在x 和y 方向都有10px 的填充：

div {padding: 10px 10px}
p {padding: inherit}

在second JSFiddle 中，子<p> 具有显式继承的x 和y 填充（1 个实际<length>，1 个inherit 关键字）：

div {padding: 10px 10px}
p {padding: 10px inherit}

检查<p> 显示 CSS 已损坏（即没有继承填充）；

在third JSFiddle（为了完整性）中，子<p> 还具有显式继承的x 和y 填充，但在这种情况下有2 个单独的inherit 关键字：

div {padding: 10px 10px}
p {padding: inherit inherit}

而且这个 CSS 也因<p> 而中断（即，没有继承填充）

我假设这意味着子元素不能使用速记“部分”继承父属性值。 这是否正确，如果是，为什么不能部分继承？（即，W3C 文档是否在某处提到过这一点？）。

更新 - 如果您明确拆分填充属性（不要使用速记），您可以继承（参见 JSFiddle）

考虑到我在几个样式表中看到案例 #2（第二小提琴），看起来其他开发人员也认为部分继承是有效的。

Answer 1

规范为属性unset、all 和inherit https://www.w3.org/TR/css3-cascade/#propdef-all 提供了三个选项，它甚至说initial | inherit | unset。从字面上看，这意味着这些值。因为定义backround:url('url.png') inherit; 没有意义。这是引擎如何在内部工作的硬编码示例。这有点像定义部分重要性，如padding:20px !important 10px;。不，你必须这样做padding:!important 10px;

Answer 2

虽然我不知道为什么会这样，但您可以使用以下技巧：

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