box-sizing

With the box-sizing property, you can change how the browser calculates the size of an element.

By default, the size of an element is considered to be the size of the content area. If you specify width and height along with padding and border, the browser will calculate the size of the element as width + padding * 2 + border * 2 and height + padding * 2 + border * 2.

🤖 If you set the value border-box for the box-sizing property, the browser will change the calculation principle and padding and border will already be included in width and height.

You can read more about the specifics of size calculation in the article “Box Model”.

Let's create two elements and apply identical styles to both:

        
          
          <div class="element first"></div><div class="element second"></div>
          <div class="element first"></div>
<div class="element second"></div>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

        
          
          .element {  display: inline-block;  width: 100px;  height: 100px;  padding: 25px;  border: 10px solid #ffffff;}
          .element {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 25px;
  border: 10px solid #ffffff;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

They will only differ in background and the value of the box-sizing property.

        
          
          .first {  box-sizing: content-box;  background-color: #2E9AFF;}.second {  box-sizing: border-box;  background-color: #F498AD;}
          .first {
  box-sizing: content-box;
  background-color: #2E9AFF;
}

.second {
  box-sizing: border-box;
  background-color: #F498AD;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

As a result, the elements ended up being of different sizes! How so? We specified the same width, height, and padding, as well as border 🤔

The reason is that with the value of the box-sizing property equal to content-box (the default value), the width of the element is calculated as follows:

Width of the content area (100) + padding left and right (25 + 25) + width of the right and left borders (10 + 10). Total: 170 pixels.

Similarly for height.

So the first element has dimensions of 170 x 170.

The size of the second element is calculated differently. Due to the value of the box-sizing property, the browser perceives width and height as the final sizes of the element. As a result, the specified width of 100 pixels already includes both the inner side paddings and the side borders. The dimensions of the second element will be 100 x 100.

As a value for the box-sizing property, it is not possible to use anything other than keywords. The value can only be one.

Available values:

• content-box — default value. Final width = width + right padding + left padding + right border + left border
• border-box — values of width and height are the final sizes of the element. Final width = width

💡 The property cannot be animated using transition 😔

💡 The property is not inherited.

💡 With any value of the property, the outer margins (margin) are not taken into account in the calculations.

💡 Default value: content-box.

        
          
          * {  box-sizing: border-box;}
          * {
  box-sizing: border-box;
}

        
        
          
            
            Copy
            Copied
            Failed to copy