Question

我希望能够将元素的margin-bottom设置为默认值。

考虑以下示例，其中h1个元素的各自margin-bottom样式属性设置为0：

h1 {
  border: 1px solid red;
  margin-bottom: 0;
}

p {
  margin: 0;
}

<h1>First Heading</h1>
<p>Paragraph</p>

<h1 id="normal-margin">Second Heading</h1>
<p>Paragraph</p>

如何将#normal-margin的margin-bottom值重置为其初始默认值？显然使用initial无效，as the initial value of margin-bottom is 0。

我意识到在这个简单的例子中，我可以简单地将:not(#normal-margin)添加到h1的样式定义中来解决问题。然而，我想要一个解决方案，它将“撤消”保证金并将其重置为初始值。

我在想我将不得不将值硬编码到CSS中，这对我来说似乎有点便宜。这是解决这个问题的唯一方法吗？

Answer 1

我认为您正在寻找的属性是unset。

unset如果属性从其父级继承，则将属性重置为其继承值，否则重置为其初始值。通过 - Mozilla Docs

jsFiddle：http://jsfiddle.net/AndrewL32/65sf2f66/58/

＆＃13;

div {
  border: medium solid green;
  margin: 10px 0px;
}
h2 {
  margin-bottom:10px;
}

/* but make those in the sidebar use the value of the 'color' property (initial value) */
h2.specialHeader {
  margin-bottom: unset;
}

＆＃13;

<div><h2>Normal Header</h2></div>
<div><h2 class="specialHeader">Special Header</h2></div>

＆＃13;

浏览器支持：

Chrome：＆gt; V.41

FireFox：＆gt; V.27

边缘：＆gt;第13节

Opera：＆gt; V.28

Safari：＆gt; V9.1

IE：不支持

See caniuse for all (un-)supported browsers

Answer 2

目前无法实现。在某些将来，请使用revert关键字

如7.3. Explicit Defaulting中所述，有4种不同的违约行为：

initial将属性设置为initial value。

如果是margin-*，那就是0。
inherit将属性设置为父元素_{^{的值（或根元素的初始值）}}。
unset的行为为inherit，否则为initial。

margin-*不会被继承，因此会产生0。
revert的行为取决于声明的来源
- 对于用户代理来源，其行为为unset
- 对于用户来源，它会将级联回滚到用户代理级别，以便计算指定的值，就好像没有为该属性指定作者级别或用户级别规则。
- 对于作者来源，它会将级联回滚到用户级别，以便计算指定的值，就好像没有为该属性指定作者级规则。

所以你想要的行为是revert，即

用户代理为h1元素
您的一个（作者）声明会删除该边距
revert将其回滚到user-agent

注意revert是CSS Cascading and Inheritance Level 4规范的最新成员，它仍然只是草稿。因此，浏览器还不支持它。

如何将margin-bottom重置为其默认值

2 个答案:

浏览器支持：