Question:

Describe the function of the box-sizing property and explain the different values that this property can take and the effect of each of those values.

Changing the Box Model With Box-Sizing

The box-sizing property takes two values :

box-sizing: content-box | border-box;

The content-box value is the default behavior of an elements height and width. It adds the border and padding to the width and height of the element. As you can see from the example below even though we set the width and height to 300px we now have a div that is far bigger than what we wanted.

 .box {
    width: 300px; 
    height:300px; 
    padding: 20px;
    border: 10px solid red;  
    box-sizing: content-box;
 }

Sites started becoming more fluid or as we would say now adays responsive so there needed to be a way to have the width we set to be that actual width. border-box to the rescue. Now the border and padding aren’t added to the width we set so what width we set is the width we get.

 .box2 {
    width: 300px; 
    height:300px; 
    padding: 20px;
    border: 10px solid red;  
    box-sizing: border-box;
 }

Because box-sizing has become the default way to style most sites there needs to be a way to target all the elements and set them to this border-box sizing.

<!-- this will set all elements to border-box -->
*, *:before, *:after {
  box-sizing: border-box;
}