CSS Box Sizing

In this tutorial, we will learn about CSS's box-sizing property and how to use it for an element.

CSS box -sizing Property

With the help of box-sizing property, we can include the padding and border properties in the total height and width of the element. By default, when we define the border and padding area for an element, it does not include in the element width and height, they implemented as an add on which increases the element box area. But this behavior can be overridden with the box-sizing property.

Element box size with box-sizing property

If we do not define a box-sizing property for an element, its total height, and width calculated as follows. total width of an element box = width + padding + border total height of an element box = height + padding + border This above calculation represents that the height and width parameter of the total element box increase when we add the padding and border area.

Example

Let’s see with an example of how the padding and border area increases the overall area of an element.

<!DOCTYPE  html>
<html>
<head>
    <title></title>
    <style>
       .without{
                height: 200px;
                width: 200px;
                border: 2px solid ;
       }

       .with{
        height: 200px;
        width: 200px;
        padding: 20px;
        border: 3px solid;
       }
    </style>
</head>
<body>
   <div class="without"> Div element area = 200px width and 200px height without padding</div>
   <div class="with"> Div element area = 200px width and 200px height with padding 30px</div>
</body>
</html>

In the above example, you will see that <div class="with"> with padding will have more area than <div class="without"> without padding.

Use the box-sizing Property

If you want that the complete width and height of the element box reside within the specified width and height property, then use the box-sizing property with border-box value. This will include the padding area within the box area and the width and height of the overall element maintained as specified.

<!DOCTYPE  html>
<html>
<head>
    <title></title>
    <style>
       .example{
                height: 200px;
                width: 200px;
                border: 2px solid ;
                padding: 20px;
                box-sizing: border-box;
       }
    </style>
</head>
<body>
   <div class="example"> Div element with 200px width, 200px height and 30px padding</div>
</body>
</html>

Note: Always use the box-sizing property for your element if you are using the absolute values. Because by altering the padding and border area the overall width and height of the element will changes.

Box sizing values

The box-sizing property can accept one of these 4 values.

box-sizing values	Description
content-box	This is the default value of box-sizing, and it does not include the padding and border area within the specified height and width.
border-box	It can include the border and padding area in the specified width and height area
initial	It set the property to its default value
inherit	Use the same value of the parent element.

Summary

The box-sizing property includes the padding and border height & width, within the specified width and height of the element.
The overall width and height of the element calculated by the sum of width or height, padding and border area.