Box sizing

Box-sizing atomic classes allow one to determine what is used to determine an element’s width or height.

Classes

Class	Output	Definition
`.box-content`	`box-sizing: content-box;`	Indicates that the element's width and height affects only the element's content box, that is the area minus the element's margin, padding, and borders. This is the default browser value.
`.box-border`	`box-sizing: border-box;`	Indicates that the element's width and height affects the entire element. preferred default value for Stacks.
`.box-unset`	`box-sizing: unset;`	Removes the previously set `box-sizing` value, reverting it back to the initial browser value.

<div>…</div>
<div class="box-content">…</div>
<div class="box-border">…</div>

Parent container

Child container

box-sizing: content-box;
width: 100%;
padding: 0;
border-width: 0;

Parent container

Child container

box-sizing: content-box;
width: 100%;
padding: 12px;
border-width: 1px;

Parent container

Child container

box-sizing: border-box;
width: 100%;
padding: 12px;
border-width: 1px;