Box Sizing

Sets how the total width and height of an element is calculated.

Class reference

Class

Output

.bs-content

box-sizing: content-box;

.bs-border

box-sizing: border-box;

.bs-unset

box-sizing: unset;

This example explains content-box without and with padding and border

Parent container

Child container

Parent container

Child container

<p class="box-content">...</p>

This example explains border-box without and with padding and border

Parent container

Child container

Parent container

Child container

<p class="box-border">...</p>