<button onclick="togglePadding1()">Toggle padding</button>
<div class="parent">
  <div class="child">Child (content-box)</div>
</div>
<h4>content-box calculation:</h4>
<p>Element width = content width + left padding + right padding + left border + right border</p>
<p>Element height = content height + top padding + bottom padding + top border + bottom border</p>
<hr>
<button onclick="togglePadding2()">Toggle padding</button>
<div class="parent-2">
  <div class="child-2">Child (border-box)</div>
</div>
<h4>border-box calculation:</h4>
<p>Element width = content width</p>
<p>Element height = content height</p>
<p>The content height/width will be adjusted based on how much border and padding is added.  If you set width to 400px with no border or padding, content width will be 400px.  If you add 20px of padding to all sides, the content width will shrink to 360px (400 - 20 - 20), but the total element width will remain 400px</p>

.parent {
  box-sizing: content-box;
  background-image: url('https://www.thediygolfer.com/wp-content/uploads/2021/02/bg-container.png');
  width: 200px;
  height: 200px;
}

.child {
  box-sizing: content-box;
  border: 5px solid black;
  width: 200px;
  height: 200px;
}

.parent-2 {
  background-image: url('https://www.thediygolfer.com/wp-content/uploads/2021/02/bg-container.png');
  width: 200px;
  height: 200px;
}

.child-2 {
  box-sizing: border-box;
  border: 5px solid black;
  width: 200px;
  height: 200px;
}

hr {
  margin-top: 50px;
  margin-bottom: 50px;
}

button {
  margin-bottom: 10px;
}

button:hover {
  cursor: pointer;
  opacity: 0.9;
}

h4 {
  margin-top: 60px;
}

function togglePadding1() {
  const el = document.querySelector('.child');
  if (el.style.padding !== '15px') {
    el.style.padding = '15px';
  } else {
    el.style.padding = '0px';
  }
}

function togglePadding2() {
  const el = document.querySelector('.child-2');
  if (el.style.padding !== '15px') {
    el.style.padding = '15px';
  } else {
    el.style.padding = '0px';
  }
}