box-sizing

Defines what the width and height of an element include. This property decides whether padding and border are added to the size you declared or are part of it.

content-box (default): width and height only measure the content; padding and border are added outside.
border-box: width and height include content, padding and border, so the final size is exactly the declared one.

Example

Both children have the same width, padding and border. Change box-sizing on the item class and compare its final size with the reference child.

Select box-sizing:

content-boxborder-box

ResultLiveContainer width100%

html

<div class="container">
  <div class="child">reference</div>
  <div class="child item">item</div>
</div>

<div class="container">
  <div class="child">reference</div>
  <div class="child item">item</div>
</div>

css

.container {
  border: 1px solid #2b7de0;
  padding: 0.5rem;
}

.child {
  border: 6px solid #1b1e26;
  margin-bottom: 0.75rem;
  padding: 1.5rem;
  width: 14rem;
}

.item {
  background: #d9d2f5;
  box-sizing: content-box;
}

.container {
  border: 1px solid #2b7de0;
  padding: 0.5rem;
}

.child {
  border: 6px solid #1b1e26;
  margin-bottom: 0.75rem;
  padding: 1.5rem;
  width: 14rem;
}

.item {
  background: #d9d2f5;
  box-sizing: content-box;
}

Edit the code or use the selectors: the result updates instantly.