revert rolls a property back to the value it would have had at an earlier cascade origin.

<main class="green">
  <section class="blue">
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>
      Consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et
      dolore magna aliqua. Ut enim...
    </p>
  </section>
  <section class="blue revert">
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>
      Consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et
      dolore magna aliqua. Ut enim...
    </p>
  </section>
</main>

.green {
  color: green;
}

.blue {
  color: blue;

  p {
    color: red;
  }
}

.revert {
  color: revert;
}

At the same time, I use these rule:

.blue {
  ...
  p:not(:first-child) {
    padding-top: unset;
  }
  ...
}

It allows me to reset padding-top for p. I don't use iframes for the examples, so they can be affected by the site's styles.

For unset, the following rules apply.

For non-inherited properties, unset works like initial:

• width
• height
• margin
• padding
• border

For inherited properties, unset works like inherit:

• color
• font-family
• font-size
• line-height

What is difference between revert and unset

Take a look at p. Browsers have their own default styles for it. For example:

p {
  display: block;
  margin-block: 1em;
}

Then we can override the margin:

p {
  margin: 30px;
}

Now we want to remove our value and restore the browser's default style.

With upset:

p {
  margin: unset; /* 0 */
}

margin is a non-inherited property, so unset works like initial. The initial value of margin is 0.

At the same time:

p {
  margin: revert; /* 1em */
}

revert removes our author-level value and lets the browser's default style apply again.