The CSS box-sizing property allows us to include the padding and border in an element's total width and height. This can make it easier to size elements and create layouts.

Content-box (Default):

In the default content-box model, the width and height of an element only apply to the content. Padding and border are added outside of the content dimensions.

Border-box:

With border-box, the width and height of an element include the content, padding, and border. This makes it easier to manage the size of elements, especially when dealing with responsive designs.

Practical Example:

Consider a div with a width of 100px, padding of 10px, and a border of 5px. Using content-box, the total width would be 130px. With border-box, the total width remains 100px.


            .box {
                width: 100px;
                padding: 10px;
                border: 5px solid black;
                box-sizing: border-box;
            }

Advantages of Border-box:

Using border-box simplifies the process of creating consistent layouts, as it eliminates the need to manually calculate the total size of an element including padding and borders.

Global Setting:

To apply border-box to all elements, you can use the universal selector (*) in your CSS. This is a common practice in modern web design.


            * {
                box-sizing: border-box;
            }

Console Output:

Box dimensions calculated with border-box.

Applying Box Sizing in Layouts

Responsive Design:

Box-sizing: border-box is particularly useful in responsive design, where elements need to adapt to different screen sizes without breaking the layout.

Consistent Element Sizing:

By using border-box, you ensure that elements maintain their intended size regardless of the amount of padding or border applied.

Simplified Calculations:

Designers can avoid complex calculations for element sizes, making the development process more efficient and less error-prone.


            .responsive-box {
                width: 50%;
                padding: 20px;
                border: 10px solid #333;
                box-sizing: border-box;
            }

Cross-Browser Compatibility:

Most modern browsers support the box-sizing property, ensuring consistent behavior across different platforms.

Legacy Support:

For older browsers, consider using vendor prefixes to ensure compatibility, although this is rarely necessary today.


            .legacy-box {
                -webkit-box-sizing: border-box; /* Safari/Chrome */
                -moz-box-sizing: border-box; /* Firefox */
                box-sizing: border-box;
            }

Console Output:

Responsive and consistent box sizing applied.