CSS Tutorial

CSS Box Sizing

Last modified on: November 1, 2024

<h3>CSS Box Sizing Overview</h3>
<p>The <code>box-sizing</code> property in CSS defines how the browser calculates the width and height of an element. By default, the element&rsquo;s width and height include only the content, but with <code>box-sizing</code>, you can change this to include padding and borders, giving you greater control over layout and spacing.</p>
<h3>Box Sizing Values</h3>
<p>The two primary values for <code>box-sizing</code> are:</p>
<ol>
<li>
<p><strong><code>content-box</code> (default)</strong>: The width and height only include the content. Padding and borders are added outside of this content area, expanding the element's total size.</p>
</li>
<li>
<p><strong><code>border-box</code></strong>: The width and height include padding and border, so the total size of the element doesn&rsquo;t increase when padding or borders are added.</p>
</li>
</ol>
<h3>How to Use <code>box-sizing</code></h3>
<p>You can apply <code>box-sizing</code> on individual elements, or set it globally on all elements for consistent layout:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>/* Set box-sizing globally */
*,
*::before,
*::after {
  box-sizing: border-box;
}
</code></pre>
</div>
</div>
</div>
</div>
<p>Using <code>border-box</code> simplifies responsive design because you can set an element&rsquo;s width and height without extra padding or borders affecting the total dimensions.</p>
<h3>Example: Box Sizing Difference</h3>
<p>Consider an element with a width of <code>200px</code>, <code>10px</code> padding, and <code>2px</code> border.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="content-box-example"&gt;Content Box&lt;/div&gt;
&lt;div class="border-box-example"&gt;Border Box&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>.content-box-example {
  box-sizing: content-box;
  width: 200px;
  padding: 10px;
  border: 2px solid black;
}

.border-box-example {
  box-sizing: border-box;
  width: 200px;
  padding: 10px;
  border: 2px solid black;
}
</code></pre>
</div>
</div>
</div>
</div>
<ul>
<li><strong>Content Box</strong>: Total width = <code>200px + 2*10px padding + 2*2px border = 224px</code>.</li>
<li><strong>Border Box</strong>: Total width remains <code>200px</code>, with padding and borders fitting inside the defined width.</li>
</ul>
<h3>Practical Use Cases for <code>box-sizing</code></h3>
<ol>
<li>
<p><strong>Responsive Layouts</strong>: Using <code>box-sizing: border-box;</code> helps keep elements within their intended width, making layout adjustments smoother.</p>
</li>
<li>
<p><strong>Consistent UI</strong>: Many designers set <code>box-sizing: border-box;</code> globally to maintain consistency across all elements.</p>
</li>
<li>
<p><strong>Form Elements</strong>: Forms with input fields, padding, and borders benefit from <code>border-box</code>, ensuring that width adjustments keep the layout consistent.</p>
</li>
</ol>
<h3>Example: Global <code>border-box</code> Reset</h3>
<p>To make layout control easier, it&rsquo;s common to apply a global reset for all elements:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>*,
*::before,
*::after {
  box-sizing: border-box;
}
</code></pre>
</div>
</div>
</div>
</div>
<p>This way, padding and borders are included in the width and height of each element, simplifying layout and sizing.</p>
<h3>Summary</h3>
<p>The <code>box-sizing</code> property is essential for building reliable, predictable layouts. Setting <code>box-sizing: border-box;</code> often simplifies responsive designs by ensuring padding and borders are included in an element&rsquo;s specified width and height. This helps you avoid unexpected element sizing and makes it easier to create pixel-perfect layouts across your projects.</p>

Web Technology View More