跳过 CSS 速记中的属性，用于填充、边距等答案

【问题标题】：Skip properties in CSS shorthand for padding, margin, etc跳过 CSS 速记中的属性，用于填充、边距等
【发布时间】：2012-04-09 13:02:10
【问题描述】：

有没有办法在简写中指定一个 CSS 属性被跳过，有 padding、border、margin 等。

喜欢padding: <skipped> 1em 2em 而不是：

padding-right: 1em
padding-bottom: 2em

【问题讨论】：

【解决方案1】：

我认为您最好的选择是分配值 auto 虽然这只会将其设置为它可能具有的任何默认 [browser] 值，我猜对于填充它将它重置为 0 [取决于元素]。

除此之外，没有。

【讨论】：

【解决方案2】：

跳过属性的正确方法是不使用简写：

padding-bottom: 2em;
padding-right: 1em;

它没有那么优雅：

padding: same 1em 2em same;

但它根本不存在于纯 CSS 中。如果您使用 LESS 或 SASS 等服务器端 CSS 扩展，则可能有语法可以做到这一点；如果没有，可以相对容易地添加。

【讨论】：

没有，也没有那么简单，因为您必须考虑属性可以由不同的类添加到元素中，而 LESS/SASS 不知道您的 HTML。它可能看起来很难看，但padding-right: 1em; padding-bottom: 2em 确实是唯一的方法。
@sg3s，LESS/SASS 只需将padding: same 1em 2em same; 转换为padding-bottom: 2em; padding-right: 1em;，就像他们将.foo { .bar {...} .baz {...} } 转换为.foo .bar {...} .foo .baz {...} 一样
嗯，好点...这让我很想将所需的代码提交给一些 gitrepos，因为那真的很简单...
是的，速记不能支持它并没有内在的原因。如果您包含 3 个属性（即跳过第四个属性，padding-left），它已经支持此行为。
@mahemoff，如果你跳过第 4 个，它就不会这样做。 padding: 1em 2em 3em; 与 padding-top: 1em; padding-left: 2em; padding-right: 2em; padding-bottom: 3em; 相同，它对左侧和右侧重复使用第二个值，这与单独放置它们不同。