How to reset margin-bottom to its default value

Question

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>

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?

Answer 1

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.