Box sizing in CSS

Box sizing in CSS

The CSS box-sizing property allows you to include padding and border in an element’s total height and width.

By default, the actual width and height of an element’s box on a web page depends upon its height, width, padding and border.

Without box-sizing property in CSS

By default, the height and width is calculated with following calculations:

  • Actual width of element=width+padding+border
  • Actual height of element=height+padding+border

This means that when you set height and width of an element, it appears a little bit bigger than the size given because it will include padding and border also. Let us take an example to show two DIV elements, one without padding and one with padding.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box sizing</title>
    <style>
        .box1{
           width: 200px;
           height: 50px;
           border: 2px solid rgb(179, 8, 8);
        }
        .box2 {
           width: 200px;
           height: 50px;    
           padding: 50px;
           border: 2px solid rgb(138, 23, 42);
        }
     </style>
</head>
<body>
    <h3>Without Box sizing</h3>
    <div class = "box1">programmingtutorial.in</div><br>
    <div class = "box2">programmingtutorial.in</div>
 </body>
</html>
without box sizing, www.programmingtutorial.in
programmingtutorial.in

In the above code, the same height and width is applied to both DIVs except padding in second DIV which results in two different box sizes. This problem can be solved with the help of box-sizing property.

With box-sizing property in CSS

The box-sizing property allows you to include padding and border in an element’s total height and width. This can be achieved by setting box-sizing:border-box ; on an element. The padding and border are included in height and width. Let us now write above code with the help of box-sizing property.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box sizing</title>
    <style>
        .box1{
           width: 200px;
           height: 50px;
           border: 2px solid rgb(179, 8, 8);
           box-sizing: border-box;
        }
        .box2 {
           width: 200px;
           height: 50px;    
           padding: 20px;
           border: 2px solid rgb(138, 23, 42);
           box-sizing: border-box;
        }
     </style>
</head>
<body>
    <h3>With Box sizing Property</h3>
    <div class = "box1">programmingtutorial.in</div><br>
    <div class = "box2">programmingtutorial.in</div>
 </body>
</html>
With box-sizing property in CSS, www.programmingtutorial.in
programmingtutorial.in

So, you have seen in both of the above codes and found that the code with box-sizing property is better than the code without box-sizing property. The box-sizing property really help you to utilise the 100% space of the web page. It is safe and recommended to use below code for all the elements of web page.

*{
box-sizing:border-box;
}