如何将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>

如何将margin-bottom值重置#normal-margin为其初始默认值？显然使用initial不起作用,因为初始值为margin-bottom0.

我意识到在这个简单的例子中我可以简单地添加: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

边缘: >第13节

歌剧: > v.28

Safari: > v9.1

IE:不支持

请参阅所有(非)支持的浏览器的caniuse