CSS Box Sizing

What is CSS Box sizing Property?

The CSS box-sizing property is used to specify how to calculate the total height and width of an element.
It controls the size of an element with a specified height and width.
It allows you to include the padding and border within the total height and width of the element.

Before starting with CSS box-sizing, let's first understand what issue occurs if we don't use this property.

Without CSS box-sizing

If we don't include box-sizing property, then the box model works like below as default:

width + padding + border = actual visible width of an element's box

height + padding + border = actual visible height of an element's box

It means if we create a box of some specific height and width and then add padding and border to it, it will look wider than the actual width.

To deal with this issue, developers need to adjust the values for height and width to give space for border and padding. Let's understand it with an example:

Example: Let's create two div with same height and width, but with different border and padding.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <style media="screen">
      .div1{
        height: 150px;
        width: 400px;
        border: 10px solid green;

      }
      .div2{
        height: 150px;
        width: 400px;
        border: 10px solid yellow;
        padding: 20px;   }
    </style>
  </head>
  <body>
    <h1>Without box-sizing property</h1>

    <div class="div1">
      I am the first div with no padding.
    </div>
    <div class="div2">
      I am the second div with padding added.
    </div>
  </body> 
</html>

In the above code, we have created two divs of the same size. In the first div, we have not included padding, whereas, in the second, we added it.

Output:

It will generate the output as:

As we can see from the above output, that we got two div with different sizes. While we have specified the same sizes of both the div, but the second appears bigger than the first.

This is the main issue that occurs in the CSS box model. This issue can be resolved with the help of box-sizing property.

With CSS box-sizing property

The above issue can be resolved by using the CSS box-sizing property. Now we will use the same code as above, but will also include box-sizing property to it.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <style media="screen">
      .div1{
        height: 150px;
        width: 400px;
        border: 10px solid green;
        box-sizing: border-box;

      }
      .div2{
        height: 150px;
        width: 400px;
        border: 10px solid yellow;
        padding: 20px;
        box-sizing: border-box;

      }
    </style>
  </head>
  <body>
    <h1>With box-sizing property</h1>

    <div class="div1">
      I am the first div with no padding.
    </div>
    <div class="div2">
      I am the second div with padding added.
    </div>
  </body>
</html>

In the above code, we have used two divs of the same height and width and also used the box-sizing property for each div.

Output:

As we can see in the above output, we got both div with the same width.

Syntax

Syntax of box-sizing property is given as:

box-sizing: border-box;  // for border box
box-sizing: content-box; // for content box

Value: CSS box-sizing property has two values, which are border-box and content box. These are given as:

content-box: As per the CSS standard, it is the default value of the box-sizing property. By using this value, the height and width properties will only include the content and do not include margin, padding, or border values. It means if we specify the width of the element as 200 px, then the content will be 200px wide, and the border and padding will be added in the final display by making it wider than 200px. For example, if an element has below size specifications:
{width: 500px;
border: 10px solid black;} then it will display a box of size 510px.

In this, the dimension of value is calculated as below:

Width= width of the content
Hight= height of the content

Example:

<!DOCTYPE html>
<html>
	<head>
		<title>box-sizing Property</title>
		<style>
			div {
        width: 300px;
				height: 150px;
				padding: 20px;
				border: 10px solid black;
				background: #4caf50;
				color: red;
      box-sizing: content-box;}
		</style>
	</head>
	<body style = "text-align: center;">
		<h2>box-sizing: content-box</h2>
		<br>
		<div>
      <p><b>javaTpoint</b><br>
      <i>Best Portal to learn technologies</i></p>
    </div>
	</body>
</html>

In the above code, we have used the content-box value of the box-sizing property.

Output:

border-box: The border-box is a widely used value of the box-sizing property. It informs the browser to adjust the border and padding within the specified height and width of an element. It means if we specify the width of an element as 200 px, then the specified border and padding will be included within 200 px, and the content box will adjust the extra width. For example, if an element has the following size specifications:

    {width: 500px;
     border: 10px solid black;}

The browser will display a box of size 500, in which 480px wide area for width will be included.

In this, the width and height are calculated by including content, border, and padding. But it does not include the margin.

The dimensions of the element are calculated as:

Width = border + padding + width of the content
Height = border + padding + height of the content.

Example:

<!DOCTYPE html>
<html>
	<head>
		<title>box-sizing Property</title>
		<style>
			div {
				width: 300px;
				height: 150px;
				padding: 20px;
				border: 10px solid black;
				background: #4caf50;
				color: red;
        box-sizing: border-box;
			}
		</style>
	</head>
	<body style = "text-align: center;">
		<h2>box-sizing: border-box</h2>
		<br>
    <div>
      <p><b>javaTpoint</b><br>
      <i>Best Portal to learn technologies</i></p>
    </div>

	</body>
</html>

In the above code, we have used the border-box value of the box-sizing property.

Output: