CodePen Embed - Custom Property Utility Class

<div>
  <div class="box" style="--padding-top:80;--padding-bottom:80;--margin-top:80;--margin-bottom:80;">
    <div>Text</div>
  </div>
</div>

<div>
  <div class="box" style="--padding-top:40;--padding-bottom:40;--margin-top:40;--margin-bottom:40;">
    <div>Text</div>
  </div>
</div>

html {font-size:16px;}
body {background:#18181A; color:#FFF;} 
body > div {background:#73764a; margin:10px; display:flex;} 
body > div > div   {background:#6657a6; width:100%; }  
body > div > div > div   {background:#407aa4;}


.box {
 
  /* To avoid subsequent elements inheriting from previously rendered siblings/ancestors */
  --margin-top:0;
  --margin-bottom:0;
  --padding-top:0;
  --padding-bottom:0;
  
  margin-top:clamp(
    calc((var(--margin-top) / 2) * 1px), 
    calc((var(--margin-top) / 14) * 1vw),
    calc(var(--margin-top) * 1px));
        
  margin-bottom:clamp(
    calc((var(--margin-bottom) / 2) * 1px),
    calc((var(--margin-bottom) / 14) * 1vw),
    calc(var(--margin-bottom) * 1px));
        
  padding-top:clamp(
    calc((var(--padding-top) / 2) * 1px),
    calc((var(--padding-top) / 14) * 1vw),
    calc(var(--padding-top) * 1px));
        
  padding-bottom:clamp(
    calc((var(--padding-bottom) / 2) * 1px),
    calc((var(--padding-bottom) / 14) * 1vw),
    calc(var(--padding-bottom) * 1px));

}

This Pen is owned by Kean Richmond on CodePen.

See more by @keanr on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.