为什么不能使用简写部分继承CSS填充？

Question

浏览样式表时,我不时会看到如下规则:

padding: 10px inherit;

我不知道这是否是有效的CSS所以我制作了3个JSFiddles.所有3个小提琴都有一个父母的<p>孩子<div>(并在Chrome 59.0中测试过).在第一个JSFiddle中,子项继承父填充(单个inherit关键字),元素检查显示两者<p>并<div>在x和y方向都有10px填充:

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

在第二个JSFiddle中,子项<p>显式继承了x和y填充(1个实际<length>,1个inherit关键字):

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

检查<p>显示CSS已经坏了(即没有继承填充);

在第三个JSFiddle中(为了完整性),子节点<p>也同时显式继承了x和y填充,但在这种情况下,有两个单独的inherit关键字:

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

而这个CSS也打破了<p>(即没有继承填充)

我假设这意味着子元素不能使用速记"部分"继承父属性值.这是正确的,如果是这样,为什么它不能被部分遗传？(即,W3C文档是否在某处提到过这个？).

更新 - 如果你明确地拆分填充属性(不要使用速记),你可以继承(参见这个JSFiddle)

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

Answer 1

虽然我不知道为什么会出现这种情况，但您可以执行以下技巧：

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