Understanding the Distinction between 'all: unset' and 'all: revert'

The 'all: unset' and 'all: revert' CSS keywords are used to reset all properties of an element. However, there is a crucial difference between them when it comes to properties set by the browser or custom user stylesheets.

'all: unset' behaves like the 'inherit' keyword, setting the property to its inherited value if it is inherited from the parent element. If there is no inherited value, it sets the property to its initial value, which is the default value as defined by the browser.

'all: revert', on the other hand, resets the cascaded value of the property to its initial state before any modifications were made by the current style origin, including the browser's default styles and user stylesheets.

To illustrate, if the browser applies a default margin of 50px to a 'p' element, and you set 'margin: revert' on that element, the margin will be reset to 50px, as if no changes had been made. In contrast, setting 'margin: unset' will remove the browser's default margin.

Example:

In this example, the first paragraph will have a margin of 50px, while the second paragraph will have no margin.

Conclusion:

'all: unset' resets all properties either to inherited or initial values, while 'all: revert' specifically reverts properties to their initial state before any style changes were applied. Understanding this difference is crucial for fine-tuning the styling of elements, particularly when dealing with browser and user stylesheets.