css - What is the difference between the initial and unset values?

Question

A simple example:

HTML

<p style="color:red!important"> 
    this text is red 
    <em> 
       this text is in the initial color (e.g. black)
    </em>
    this is red again
</p>

CSS

em {
    color:initial;
    color:unset;
}

What is the difference between initial and unset? Only supports browsers

CanIUse: CSS unset value

Developer Mozilla Web CSS initial

Answer 1

According to your link:

unset is a CSS value that's the same as "inherit" if a property is inherited or "initial" if a property is not inherited

Here is an example:

pre {
  color: #f00;
}
.initial {
  color: initial;
}
.unset {
  color: unset;
}

<pre>
  <span>This text is red because it is inherited.</span>
  <span class="initial">[color: initial]: This text is the initial color (black, the browser default).</span>
  <span class="unset">[color: unset]: This text is red because it is unset (which means that it is the same as inherited).</span>
</pre>