Javatpoint Logo
Javatpoint Logo

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:

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.

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:

CSS Box Sizing

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.

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:

CSS Box Sizing

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:

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:

Example:

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

Output:

CSS Box Sizing
  • 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:

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:

Example:

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

Output:

CSS Box Sizing
Next Topic#





Youtube For Videos Join Our Youtube Channel: Join Now

Feedback

  • Send your Feedback to feedback@javatpoint.com

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA