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.

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;