CSS Box Sizing

The box-sizing property in CSS allows you to control how the width and height of an element are calculated. It can make designing layouts easier by including or excluding padding and border in the element's total width and height.

Box Sizing Values

The box-sizing property can take the following values:

Value Description Code Example
content-box This is the default value. The width and height properties (and min/max properties) include only the content, but do not include padding, border, or margin. For example, if you set an element's width to 300px, the content will be 300px wide, and the padding and border will be added outside of this width, making the total width larger. 

 box-sizing: content-box;
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid black;
background-color: lightblue;
Content Box Example
  • Total Width:
    • Total width = content width + left padding + right padding + left border + right border
    • Example: 200px (content width) + 20px (left padding) + 20px (right padding) + 5px (left border) + 5px (right border) = 250px (total width)
    • Using content-box (default): content width (200px) + (20px (left padding) + 20px (right padding) + 5px (left border) + 5px (right border)) = 200px (content width)
  • Total Height:
    • Total height = content height + top padding + bottom padding + top border + bottom border
    • Example: 100px (content height) + 20px (top padding) + 20px (bottom padding) + 5px (top border) + 5px (bottom border) = 150px (total height)
    • Using content-box (default): content height (100px) + (20px (top padding) + 20px (bottom padding) + 5px (top border) + 5px (bottom border)) = 100px (content height)
border-box The width and height properties (and min/max properties) include the padding and border, but not the margin. This value makes it easier to ensure elements fit within a specific size. For example, if you set an element's width to 300px, the padding and border will be included within this width, making the content area smaller. 

box-sizing: border-box;
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid black;
background-color: lightcoral;
Border Box Example
  • Content Width:
    • Total width = content width + left padding + right padding + left border + right border
    • Example: 200px (content width) + 20px (left padding) + 20px (right padding) + 5px (left border) + 5px (right border) = 250px (total width)
    • Using border-box: total width (250px) - (20px (left padding) + 20px (right padding) + 5px (left border) + 5px (right border)) = 200px (content width)
  • Content Height:
    • Total height = content height + top padding + bottom padding + top border + bottom border
    • Example: 100px (content height) + 20px (top padding) + 20px (bottom padding) + 5px (top border) + 5px (bottom border) = 150px (total height)
    • Using border-box: total height (150px) - (20px (top padding) + 20px (bottom padding) + 5px (top border) + 5px (bottom border)) = 100px (content height)

Using Box Sizing in CSS

Here is how you can apply the box-sizing property to your elements using CSS:

Example: Content-Box
Try yourself 
        
            
.content-box {
    box-sizing: content-box;
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid black;
    background-color: lightblue;
}

This example shows an element using the default content-box value, where padding and border are not included in the width and height.

Example: Border-Box
Try yourself 
        
            
.border-box {
    box-sizing: border-box;
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid black;
    background-color: lightcoral;
}

This example shows an element using the border-box value, where padding and border are included in the width and height.

Example: Global Box-Sizing
Try yourself 
        
            
*, *::before, *::after {
    box-sizing: border-box;
}

It's often recommended to set box-sizing: border-box; globally to ensure consistent sizing across all elements. This can help prevent layout issues that arise from padding and border being added to the width and height of elements.

Example: Comparison of Box Sizing
Try yourself 
        
            
.div1 {
    box-sizing: border-box;
    width: 300px;
    height: 100px;
    padding: 20px;
    border: 1px solid blue;
}

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

This example compares elements with and without box-sizing: border-box; to illustrate the difference in how the box-sizing property affects the element's size.

Important Notes

Here are some important notes and best practices when using the box-sizing property:

The border-box value can help prevent layout issues by including padding and border in the element's width and height, making it easier to manage sizes. It's a good practice to set box-sizing: border-box; globally to simplify the layout calculations:
Try yourself 
        
            
*, *::before, *::after {
    box-sizing: border-box;
}
Be mindful of browser compatibility, though most modern browsers fully support the box-sizing property.