🎯 CSS box-sizing Property

The box-sizing CSS property determines how the total width and height of an HTML element are calculated.

It controls whether an element's padding and border are included within the specified width and height values or added on top of them.

The box-sizing property helps create predictable layouts and is widely used in responsive web design. It allows developers to manage element dimensions more accurately.

• Makes layout calculations easier
• Improves responsive design consistency
• Prevents unexpected element sizing
• Simplifies width and height management

The specified width and height apply only to the content area. Padding and borders are added to the final size of the element.

div {
    box-sizing: content-box;
    width: 200px;
    padding: 20px;
    border: 10px solid black;
}
                

Total width = 200px + 40px padding + 20px border = 260px.

The specified width and height include the content, padding, and border. The overall size remains exactly as defined.

div {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 10px solid black;
}
                

Total width remains 200px because padding and border are included within the specified width.

Resets the property to its default value, which is content-box.

div {
    box-sizing: initial;
}
                

The element inherits the box-sizing value from its parent element.

div {
    box-sizing: inherit;
}
                

* {
    box-sizing: border-box;
}
                

Many developers apply border-box globally because it makes element sizing more predictable and simplifies responsive layouts.