Question

来自css新手的快速问题。我正在尝试通过使用某些属性（如填充/边距/等）的简写来减小CSS文件的大小。在某些情况下，我想要，例如，指定margin-top，margin-left和margin-bottom，但继承margin-right。我试过了

margin: 10px inherit 11px 12px;

但这不起作用，因为CSS inherit关键字继承全部或全部。

有没有办法将那个标记为跳过并执行类似

的操作

margin: 10px    11px 12px;
margin-right: inherit;

让CSS知道我在4值速记中跳过一个值，而不是将其解释为3值速记？

有没有人知道让这个工作的简单方法？或者，如果我没有指定所有四个值，我应该只使用长手吗？谢谢！

Answer 1

如果覆盖该值，将忽略最后一个声明，因此您可以这样做：

element {
    margin: 10px 0 11px 12px;
    margin-right: inherit;
}

...其中“0”在这里可以是任何值* ^见下文。

这不会像您期望的那样有效：

margin: 10px    11px 12px;

这实际上会产生这些值：

margin-top: 10px;
margin-right: 11px;
margin-bottom: 12px;
margin-left: 11px; /* copied from margin-right's value since it's missing */

以防万一，请注意inherit采用应用于父元素的任何值，并且不会像通常认为的那样将其“重置”为“默认”。因此，如果它是margin-right:100px的直接子项，它将继承该值。这是一个罕见的情况，你实际上想要继承像保证金这样的属性，你可能会认为它做了一些它确实没有的东西。

编辑：正如我在评论中所说的那样，我不知道无法以速记（至少为保证金）使用inherit，直到你带来这个提问。我在这里得到了一些相当奇怪的结果，老实说，我不知道该怎么做：http://jsfiddle.net/fpHb9/1/

因此，在其他人可以出现并提供对此行为的更好理解之前，请小心这一点。明确设置保证金可能更好。

EDIT2 ：我想我解开了演示中的谜团。我没有参考方便，但似乎由于inherit在速记中无效，因此使用它将使整个声明无效。所以像这样的东西不会按预期工作：

margin:20px inherit 20px 20px; /* this line gets ignored completely */
margin-right:inherit;

所以，修改我之前的陈述：

...此处“0”可以是任何有效保证金宽度值，如下所示：
http://www.w3.org/TR/CSS2/box.html#margin-properties。

请原谅我长篇大论的答案，你引起了我对这是如何工作（或不工作）的好奇心。