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 */
}
>Solution :
Use padding-inline to target only left and right side
padding-inline: 1em;
div {
padding-inline: 1em;
border:1px solid red;
}
<div>box</div>