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

1
2
3
<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;