exponential vw (viewport width) calculations?

[ChenXiu]

Given the following css rule:
body { margin: 0 100px; }

I then want the margin to start shrinking at a viewport width of 600px:
@media screen and (max-width: 600px) {
body { margin: 0 8.333vw; }
}

The Challenge:
The aforementioned css rule causes the margin to become zero only when the viewport width reaches zero...
Is there a way to cause the margin to smoothly become zero when the viewport reaches, say, 400px?

It appears the only way to do this is by using chain of several diminishing @media queries.
(And, using "transition: ease all .2s" to liquify the transition points.)

Is there a fancy css rule using calc (along with exponents perhaps) that can accomplish this? (I've tried doing things "viewport squared," but it appears you cannot multiply viewports times itself.)

Any ideas would be appreciated.

 

 

 

[maxxd]

The only margin of zero in your code is the top and bottom margins, and they'll be zero at any browser size.

I'm not gonna lie, I'm not completely sure I understand the question you're asking but it sounds like you may be looking for CSS clamp().

[ChenXiu]

Dear Moderator, please delete this thread. I nothing less than bungled my question. I have never bungled a question before. This one is...... bungled.

I meant "padding" when typing the word "margin."  I did not mean "margin."

Thank you.

[maxxd]

Whether it's padding or margin in this case doesn't really matter - the question could still be valid and of use to others. If you could explain a bit more fully what it is you're after and what you've tried we can all work to come to a solution that works regardless the target attribute.