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

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是行不通的，因为margin-bottom的初始值是0。

我意识到在这个微不足道的例子中，我可以简单地将:not(#normal-margin)添加到h1的样式定义中来解决这个问题。然而，我希望有一个解决方案，可以"撤销"边距并将其重置为初始值。

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

Answer 1

我想你要找的属性是unset。

unset如果继承父属性，则将属性重置为其继承值;如果不是继承父属性，则重置为其初始值。Via - Mozilla Docs

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

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;
}

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

浏览器支持:

Chrome:> v.41

FireFox:> v.27

Edge:> v.13

Opera:> v.28

Safari:> v9.1

IE:不支持

查看所有(非)支持的浏览器

Answer 2

目前是不可能的。在将来，使用revert关键字

如7.3所述。显式默认，有4种不同的默认行为:

• initial设置属性为初始值。

  margin-*就是0

• inherit将属性设置为父元素_{^{的值(或根元素的初始值)}}。

• unset对于继承属性的行为与inherit相同，否则与initial相同。

  margin-*不是遗传的，所以会产生0。

• revert的行为取决于声明的来源

  • 对于user-agent origin，它的行为为unset
  • 对于用户源，它回滚级联到用户代理级别，以便计算指定的值，就像没有为该属性指定作者级别或用户级别规则一样。
  • 对于作者来源，它将级联回滚到用户级别，以便计算指定的值，就像没有为该属性指定作者级别规则一样。

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

• user-agent为h1元素添加一些边距
• 您的(作者)声明之一删除了该边距
• revert回滚到user-agent
定义的边距

revert是最近添加到CSS级联和继承级4规范的，它仍然只是一个草案。因此，浏览器还不支持。