bottom to its default value
I'd like to be able to set the margin-bottom
of an element to its default value.
Consider the following example in which there are h1
elements which have their respective margin-bottom
style properties set to 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>
I think the property you're looking for is unset
.
unset
resets the property to its inherited value if it inherits from its parent or to its initial value if not. Via - https://developer.mozilla.org/en-US/docs/Web/CSS/unset
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>
Currently it's not possible. In some future, use the revert
keyword
As explained in 7.3. Explicit Defaulting, there are 4 diferent defaulting behaviors:
initial
sets a property to its initial value.
In the case of margin-*
, that's 0
.
inherit
sets a property to the value of the parent element (or to the initial value for the root element).
unset
behaves as inherit
for inherited properties, and as initial
otherwise.
margin-*
are not inherited, so it would produce 0
.
The behavior of revert
depends on the origin of the declaration
unset
So the behavior you want is revert
's one, ie
h1
elements revert
rolls back that to the margin defined by the user-agent Note revert
is a recent addition to the CSS Cascading and Inheritance Level 4 spec, which is still only a draft. Therefore, browsers don't support it yet.
上一篇: 两个外键作为主键
下一篇: 底部为其默认值