<h1>Different <code>box-sizing</code> values</h1>

<h2>Default values</h2>

<p>These are the common settings for all the items in the sections below.</p>

<pre><class class="language-css">.item {
  height: 100px;
  width: 25%;
  border: 1px solid black;
  background-color: teal;
}</class></pre>

<h2>Using <code>box-sizing: border-box</code> </h2>

<p>When using <code>box-sizing: border-box</code> the size of the element will include any left or right margin, border, or padding into the size consideration. As a result the boxes may not be 25% wide but they will the width of the window.</p>

<div class="container01">
  <div class="item item01"></div>
  <div class="item item02"></div>
  <div class="item item03"></div>
  <div class="item item04"></div>
</div>

<h2>Using <code>box-sizing: content-box</code></h2>

<p>Unline <code>border-box</code> using <code>box-sizing: content-box</code> will not take padding, border or margin dimensions when determining the size of an element, as a result, each box in the example below is 25% + 2 pixels (one each from the right and left border) wide.</p>

<p>As a result, the boxes will not fit in the available screen width and thus will display as vertical boxes unless you shrink the width of the box to account for the borders.</p>

<div class="container02">
  <div class="item item01"></div>
  <div class="item item02"></div>
  <div class="item item03"></div>
  <div class="item item04"></div>
</div>

@import url("https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10..0,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10..0,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap");
/* <weight>: Use a value from 100 to 900
   <slant>: Use a value from -10 to 0
*/

body {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "slnt" 0;
}

pre,
code,
code[class~="lang"] {
  font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;

  color: black;
  background: grey;
  opacity: 0.75;
}

p {
  width: 80ch;
}

code {
  background: initial;
}

.container01 {
  display: flex;
  box-sizing: border-box;
}
.item {
  height: 100px;
  width: 25%;
  border: 1px solid black;
  background-color: lightblue;
}

.content02 {
  display: flex;
  box-sizing: content-box;
}