keywords (initial, revert, etc) in padding and margin shorthand properties-CodePudding

Here is a padding shorthand property:

selector {
  padding: 0 1em;
}

which is the same as

selector {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 1em;
  padding-right: 1em;
}

I have tried to use the same shorthand as in the first example with keywords (initial, inherit, unset, revert) instead of numbers, but this doesn't work. May be there is some workaround or I simply don't know something very simple?

selector {
  padding: revert 1em; /* doesn't work */
}

selector {
  padding: 'revert' 1em; /* and this too */
}

CodePudding user response：

Use padding-inline to target only left and right side

padding-inline: 1em;

div {
  padding-inline: 1em;
  border:1px solid red;
}

<div>box</div>