How to reset margin-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>Second Heading</h1>
<p>Paragraph</p>

How can I reset the margin-bottom value of #normal-margin to its initial, default value? Obviously using initial won't work, as the initial value of margin-bottom is 0.

I realise in this trivial example I can simply add :not(#normal-margin) to the style definition of h1 to fix the issue. I would however like a solution which would “undo” the margin and reset it to its initial value.

I’m thinking that I’m going to have to hard-code values into the CSS, which to me seems a bit cheap. Is that the only solution to this problem?

2 Answers

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 - Mozilla Docs

jsFiddle:

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>Special Header</h2></div>

Browser Support:

Chrome: > v.41

FireFox: > v.27

Edge: > v.13

Opera: > v.28

Safari: > v9.1

IE: Not Supported

See caniuse for all (un-)supported browsers

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

  • For user-agent origin, it behaves as unset
  • For user origin, it rolls back the cascade to the user-agent level, so that the specified value is calculated as if no author-level or user-level rules were specified for the property.
  • For author origin, it rolls back the cascade to the user level, so that the specified value is calculated as if no author-level rules were specified for the property.

So the behavior you want is revert's one, i.e.

• The user-agent adds some margin to h1 elements
• One of your (author) declarations removes that margin
• 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.