<div class="sandbox">
  <div class="options">
    <pre>
.element {
  padding:&nbsp;<select class="top">
        <option value="0" selected>0</option>
        <option value="10px">10px</option>
        <option value="25px">25px</option>
      </select> <select class="right">
        <option value="0" selected>0</option>
        <option value="10px">10px</option>
        <option value="25px">25px</option>
      </select> <select class="bottom">
        <option value="0" selected>0</option>
        <option value="10px">10px</option>
        <option value="25px">25px</option>
      </select> <select class="left">
        <option value="0" selected>0</option>
        <option value="10px">10px</option>
        <option value="25px">25px</option>
      </select> 
}
</pre>
  </div>

  <div class="content">
    <div class="element">
      Lorem ipsum dolor sit amet, massa vitae velit elit.
    </div>
  </div>

</div>

.element {
  background-color: var(--green);
  font-weight: 300;
  text-align: left;
  padding: 0;
  margin: 0 auto;
}
View Compiled 
const selectList = document.querySelectorAll('select');
const t = document.querySelector('.top');
const r = document.querySelector('.right');
const b = document.querySelector('.bottom');
const l = document.querySelector('.left');
const element = document.querySelector('.element');

selectList.forEach(select => select.addEventListener('change', () => {
  element.style.padding = `${t.value} ${r.value} ${b.value} ${l.value}`;
}))
View Compiled

External CSS

  1. https://tim-montmorency.com/timdoc/shared/styles/codepen.css

External JavaScript

This Pen doesn't use any external JavaScript resources.