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.

Note: The unset property is a combination property that resets a property to its inherited value. It behaves like the inherit and the initial keywords, but it properly selects the right value for you. Unfortunately, unset is not fully supported in Internet Explorer. Because of this all unset values have the correct inherit or initial value applied.

Examples

<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;