使用CSS速记属性时保持某些值不变

Question

这个问题不时出现在我脑海中，但由于解决方法非常简单，我从不费心花时间进一步调查。今天我想我会看到Stack Overflow对此事的评论。

假设我有这个：

/* Selector setting up shared properties for some elements */ 
#header, #main, #footer {
    margin: 0 5%;
}

现在假设我要覆盖margin-top的{​​{1}}和margin-bottom。在我的头脑中，我通常会做#header（忘记前面的规则），但这当然也会覆盖margin: 1em 0;和margin-right。我想要的是一种指定速记属性的某个值根本不应该改变的方法，这可能吗？这些是我想到的选择：

margin-left

Answer 1

不幸的是，这目前无法实现。您必须坚持分别指定margin-top和margin-bottom。

速记属性始终会更改所有其组件（简写）属性的值。也就是说，在速记属性中省略的任何值对于它们各自的属性将默认为initial，除非由cascading或其他一些规则解决，具体取决于速记属性。例如，由于速记后出现的margin-bottom缩写，以下结果会导致除底部以外的所有边上的自动边距：

#header {
    /* 
     * Note: this is short for margin: auto auto auto auto;
     * none of the longhands are set to initial! Different shorthands
     * have different rules, but a shorthand always changes the values
     * of all its longhands.
     */
    margin: auto;
    margin-bottom: 1em;
}

如果水平边距和垂直边距有单独的缩写，你可以这样做，而不必担心保留特定的手数值，但目前不存在这样的短缺。

正如我在评论中提到的那样，margin: 1em inherit无效，因为CSS范围内的关键字inherit（以及initial和其他标准中引入的其他关键字）可能只会出现在属性中声明，这包括速记声明。即使margin: 1em inherit确实有效，该元素也会从父元素继承水平边距，而不是从它自己的级联继承（因为这不是继承的含义）。无法为给定元素上的属性检索级联或指定值，并且能够执行此操作几乎肯定会容易出错，因为最具体的选择器中包含已解析值的最底层声明可以任何地方。