Box-sizing POC

This ensures all the sizes in the box model fit and auto adjusts the rest of metrics

Content box:

{
box-sizing:content-box;
width:100px;
height:100px;
margin:10px;
border:20px;
padding:30px;
}

total width of the above element is 100 + 10 + 20 + 30 = 160 content width will be 100

if we specify


{
box-sizing:border-box;
width:100px;
height:100px;
margin:10px;
border:20px;
padding:30px;
}

total width of the above element is 100 + 10 = 110, content width will be 40