<div>
  <label>Padding <input type="range" id="padding" min="40" max="100" value="40"></label>
  <label>Border <input type="range" id="border" min="40" max="100" value="40"></label>
  <label>Margin <input type="range" id="margin" min="0" max="100" value="40"></label>
</div>

<div class="grid">
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea necessitatibus nobis minima ipsam. Pariatur sit ea cum officiis, illo totam fuga consequatur debitis, aut aspernatur possimus quo dignissimos quasi reiciendis.</div>
  <div>Quis vero doloribus facere dolorem illum voluptates dolores praesentium ut ipsam cumque libero officiis adipisci nostrum deleniti, excepturi obcaecati culpa architecto deserunt, saepe voluptate eum asperiores similique. Culpa, officiis possimus?</div>
  <div>Rem nulla rerum quo eaque neque similique sunt sint esse asperiores cupiditate, tenetur eum sed, laboriosam adipisci molestias blanditiis aliquam eius laudantium saepe autem quidem. Dignissimos quod nobis animi rerum?</div>
  <div>Placeat enim ratione repellendus optio et excepturi blanditiis ipsa saepe inventore in debitis, ipsam praesentium dolores ab omnis veniam, dicta vero accusamus corrupti obcaecati molestias. Aut explicabo at exercitationem quo.</div>
  <div class="box-model" id="demo">
    Content

    <span id="p">Padding</span>
    <span id="b">Border</span>
    <span id="m">Margin</span>
  </div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea necessitatibus nobis minima ipsam. Pariatur sit ea cum officiis, illo totam fuga consequatur debitis, aut aspernatur possimus quo dignissimos quasi reiciendis.</div>
  <div>Quis vero doloribus facere dolorem illum voluptates dolores praesentium ut ipsam cumque libero officiis adipisci nostrum deleniti, excepturi obcaecati culpa architecto deserunt, saepe voluptate eum asperiores similique. Culpa, officiis possimus?</div>
  <div>Rem nulla rerum quo eaque neque similique sunt sint esse asperiores cupiditate, tenetur eum sed, laboriosam adipisci molestias blanditiis aliquam eius laudantium saepe autem quidem. Dignissimos quod nobis animi rerum?</div>
  <div>Placeat enim ratione repellendus optio et excepturi blanditiis ipsa saepe inventore in debitis, ipsam praesentium dolores ab omnis veniam, dicta vero accusamus corrupti obcaecati molestias. Aut explicabo at exercitationem quo.</div>
</div>

.box-model {
  background-image: linear-gradient(
      oklch(75% 12% 216deg),
      oklch(75% 12% 216deg)
    ),
    linear-gradient(oklch(83% 23% 116deg), oklch(83% 23% 116deg)),
    linear-gradient(oklch(91% 23% 83deg), oklch(91% 23% 83deg));
  background-clip: content-box, padding-box, border-box;
  border-radius: 4px;

  --padding: 40px;
  --margin: 30px;
  --border-width: 40px;

  padding: var(--padding);
  margin: var(--margin);
  border: var(--border-width) solid transparent;

  display: grid;
  place-items: center;

  position: relative;

  > span {
    position: absolute;

    &#p {
      top: 12px;
    }
    &#b {
      top: -28px;
    }
    &#m {
      top: calc(var(--border-width) * -1 - 28px);
    }
  }
}

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  font-family: system-ui;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  > div:nth-child(2) {
    border-block-end: 1px solid;
  }
  > div:nth-child(4) {
    border-inline-end: 1px solid;
  }
  > div:nth-child(6) {
    border-inline-start: 1px solid;
  }
  > div:nth-child(8) {
    border-block-start: 1px solid;
  }

  > div:not([class]) {
    padding: 1rem;
    opacity: 0.2;
  }
}

label {
  display: block;
  margin-bottom: 10px;
}

@media (width < 600px) {
  .grid {
    grid-template-columns: 1fr;
    > div:nth-child(1),
    > div:nth-child(2),
    > div:nth-child(3),
    > div:nth-child(7),
    > div:nth-child(8),
    > div:nth-child(9) {
      display: none;
    }
  }
}

padding.addEventListener("input", (e) => {
  demo.style.setProperty("--padding", `${e.target.value}px`);
});
border.addEventListener("input", (e) => {
  demo.style.setProperty("--border-width", `${e.target.value}px`);
});
margin.addEventListener("input", (e) => {
  demo.style.setProperty("--margin", `${e.target.value}px`);
});