Geek Answers Handbook

How to reset margin-bottom to default

I would like to set the margin-bottom value of the default element.

Consider the following example, in which there are h1 elements that have the corresponding margin-bottom style properties specified as 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 bottom value of the #normal-margin field to indicate its initial default value? Obviously, using initial will not work, since the initial margin-bottom value is 0 .

In this trivial example, I can simply add :not(#normal-margin) to the h1 style definition to fix the problem. Nevertheless, I would like to find a solution that will “cancel” the margin and reset to its initial value.

Im thinking that Im will have hardcodes in CSS, which seems a little cheap to me. Is this the only solution to this problem?

+7
html css
source share
2 answers

I think the property you are looking for is unset .

unset returns a property to its inherited value if it inherits from its parent or 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>

Browser Support:

Chrome: ver. 41 above

Firefox: ver. 27 above

IE: Not Supported

Opera: Not Supported

Safari: Not Supported

+4
source share

This is currently not possible. In the future, use the revert keyword

As explained in 7.3. Explicit default , there are 4 different default behaviors:

  • initial sets the property to its initial value .

    In the case of margin-* it is 0 .

  • inherit sets the property for the value of the parent element (or for the initial value for the root element) .

  • unset behaves like inherit for inherited properties and as initial otherwise.

    margin-* not inherited, so it creates 0 .

  • The behavior of revert depends on the start of the declaration.

    • For the user agent source, it behaves like unset
    • For a user’s source, it rolls back the cascade to the user agent level, so that the specified value is calculated as if rules for the author level or user level were not set for this property.
    • For the source of the original, it rolls the cascade to the user level, so that the specified value is calculated as if the author level rules were not specified for the property.

So you need revert one, i.e.

  • User agent adds some margin to h1 elements
  • One of your (copyright) declarations deletes this stock
  • revert drops this value to the field defined by the user agent

Note revert is the latest addition to the CSS Cascading and Inheritance Level 4 specification, which is still only draft. Therefore, browsers do not yet support it.

0
source share

More articles:


All Articles