'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 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?

htmlcss


Solution 1:[1]

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: 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>

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

Solution 2:[2]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2

Related Questions