min padding

1//In 2020 this is now very straightforward using the CSS math functions: min(), max(), and clamp().
2
3//A min calculation picks the smallest from a comma separated list of values (of any length). This can be used to define a max-padding or max-margin rule:
4padding-right: min(50px, 5%);
5
6//A max calculation similarly picks the largest from a comma separated list of values (of any length). This can be used to define a min-padding or min-margin rule:
7padding-right: max(15px, 5%);
8
9//A clamp takes three values; the minimum, preferred, and maximum values, in that order.
10padding-right: clamp(15px, 5%, 50px);

1padding-right: min(50px, 5%);
2

1padding-right: max(15px, 5%);
2

1padding-right: clamp(15px, 5%, 50px);
2

1max(MINIMUM, min(PREFERRED, MAXIMUM))
2