Home/Elements/Box Sizing

Box Sizing

Two utility classes for switching an element's box-sizing model between the default border-box and the legacy content-box behavior.

Usage

Every element in ArchCSS's reset already uses border-box globally. These classes exist for the rare case where you need to opt an individual element back into content-box, or make the choice explicit.

Preview - both boxes are 160px wide with 2rem padding

border-box
padding included in width
content-box
padding added to width
<div class="border-box" style="width:160px; padding:2rem;">
  160px total, padding included
</div>

<div class="content-box" style="width:160px; padding:2rem;">
  160px content + 2rem padding added on top
</div>
ClassCSS
.border-boxbox-sizing: border-box
.content-boxbox-sizing: content-box
ArchCSS concept: the global reset already sets border-box on every element, so .border-box is mostly useful for overriding a .content-box ancestor or for clarity in markup.