The CSS adds padding or border to an element by default after you define its height and width. Suppose you have four elements of 25% width each; if any of the elements has a left/right border or padding, the components won’t fit properly in the parent element. CSS box-sizing helps eliminate this issue.

CSS box-sizing enables you to define how you want the height and width of an element to be calculated. It means that you can use this property to specify whether the padding or border of the element should be included in the height and width or not. But before getting into the CSS box-sizing property, let’s delve a bit deeper into the problem it solves.

Post Graduate Program: Full Stack Web Development

in Collaboration with Caltech CTMEEnroll Now
Post Graduate Program: Full Stack Web Development

What Happens Without Using Box-Sizing?

If we don’t use the box-sizing property, then the styling will be done as default. This means that by default, CSS adds any padding or border of an element to its total height and width mentioned by the coder. Here’s how it looks in a mathematical representation.

Rendered height = defined height + padding (if any) + border (if any)

Rendered width = defined width + padding (if any) + border (if any)

Example:

Let’s consider an example for understanding this. Suppose you define a div with height and width as 150px and 300px, respectively. The div also has a border of 20px on each side. In this case, the calculations will be done as follows:

Rendered height = 150px (defined height) + 20px (top border) + 20px (bottom border) = 190px

Rendered width = 300px (defined width) + 20px (left border) + 20px (right border) = 340px

As you can see, the element’s size increases by 40px due to the 20px border. Similarly, when you define a component’s height and width and add padding or border, its size will increase. Let’s write a code for our above example to demonstrate this.

Here, we will create two div elements: one with a border and one without a border.

HTML Code:

<!DOCTYPE html>

<html>

  <head>

    <title>Without box-sizing example</title>

    <link rel="stylesheet" href="styles.css" />

  </head>

  <body>

      <div class="withborder"></div>

      <div class="withoutborder"></div>

  </body>

</html>

CSS Code:

.withborder {

  width: 300px;

  height: 150px;

  background: yellow;

  border: 20px solid black;

  /* total height = 150px + 20px + 20px = 190px

 and total width = 300px +20px +20px = 3340px */

}

.withoutborder {

  width: 300px;

  height: 150px;

  background: yellow;

  /* total height = 150px and total width = 300px */

}

Output:

Box_sizing_1

As you can see, the box model will display the sum of defined height and width + any border or padding as the element’s size. This can pose a challenge if you work with multiple elements in a box model. For instance, if you create three child boxes in a parent box and have assigned the 100% width and height among the three, the child boxes will go out of the parent box if any of them have padding or borders.

New Course: Full Stack Development for Beginners

Learn Git Command, Angular, NodeJS, Maven & MoreEnroll Now
New Course: Full Stack Development for Beginners

What Happens With Using Box-Sizing?

Now that we know the problem, let’s look at the solution, i.e., box-sizing. CSS box-sizing enables you to specify how the total rendered height and width should be calculated: including border and padding or not. So, you can change what was happening in the above example and include the div’s border as a part of the total height and width. Hence, the model will not add the 20px border to the already defined height and width. Instead, it will include the border within. Let’s use the same code and add the size-boxing property to it to see the difference in the output.

HTML Code:

<!DOCTYPE html>

<html>

  <head>

    <title>With box-sizing example</title>

    <link rel="stylesheet" href="styles.css" />

  </head>

  <body>

      <div class="withborder"></div>

      <div class="withoutborder"></div>

  </body>

</html>

CSS Code:

.withborder {

  width: 300px;

  height: 150px;

  background: yellow;

  border: 20px solid black;

  box-sizing: border-box;

}

.withoutborder {

  width: 300px;

  height: 150px;

  background: yellow;

  box-sizing: border-box;

}

Output:

Box_sizing_2

As you can see, the 20px border was adjusted to the already defined height and width and not added to it.

Syntax of Box-Sizing

The syntax for CSS box-sizing property is:

box-sizing: content-box | border-box

The box-sizing property accepts two values: content-box and border-box. Let’s learn more about them.

Full Stack Web Developer Course

To become an expert in MEAN StackView Course
Full Stack Web Developer Course

CSS Box-Sizing: Content-Box

Content-box is the default value of the size-boxing property. It works similar to what we have seen in the without box-sizing section. So, if you define the width of a div as 200px and then add 20px padding and 10px border to it, the finally rendered width will be greater than 200px, as per the calculations shown above. The same will be valid for height as well. Let’s look at the code for the same.

HTML Code:

<!DOCTYPE html>

<html>

  <head>

    <title>Without box-sizing example</title>

    <link rel="stylesheet" href="styles.css" />

  </head>

  <body>

      <div class="withborder">

        <p>Box-sizing: content-box example</p>

      </div>

  </body>

</html>

CSS Code:

.withborder {

  width: 200px;

  height: 100px;

  background: yellow;

  border: 10px solid black;

  padding: 20px;

  box-sizing: content-box;

}

Output:

Box_sizing_3.

CSS Box-Sizing: Border-Box

The border-box value will include everything, content, padding, and border, within the height and width specified. It means that if you set the width to be 200px, the finally rendered element will not exceed 200px width and include the padding, border, and content within it. Let’s use the same example as for the content-box value, but this time with the border-box value.

HTML Code:

<!DOCTYPE html>

<html>

  <head>

    <title>Without box-sizing example</title>

    <link rel="stylesheet" href="styles.css" />

  </head>

  <body>

      <div class="withborder">

        <p>Box-sizing: content-box example</p>

      </div>

  </body>

</html>

CSS Code:

.withborder {

  width: 200px;

  height: 100px;

  background: yellow;

  border: 10px solid black;

  padding: 20px;

  box-sizing: border-box;

}

Output:

Box_sizing_4

As you can see, the padding, border, and content were calculated as a part of the total 200px. Hence, the text moved a little towards the down from where it was displayed in the last result.

Free Course: Programming Fundamentals

Learn the Basics of ProgrammingEnroll Now
Free Course: Programming Fundamentals

Browsers That Support CSS Box-Sizing

The following browsers support CSS box-sizing property:

Browser Name

Version

Google Chrome

10.0.4.0 -webkit-

Internet Explorer

8.0

Microsoft Edge

12.0

Firefox

29.0.2.0 -moz-

Safari

9.5

Opera

5.1.3.2 -webkit-

Advance your career as a MEAN stack developer with the Full Stack Web Developer - MEAN Stack Master's Program. Enroll now!

Conclusion

With the CSS box-sizing property, you get to decide how the box model should calculate the height and width of an element. It is recommended to use border-box values when laying elements to make the calculations easier. However, if you are using the position property, using the content-box value is recommended to allow the size to be relative to the content. It’s time to use the property in your code and play with it to get acquainted with how the property works when laying out elements for styling a webpage. You can learn more about such fundamental CSS concepts by referring to Simplilearn’s CSS Tutorial for Beginners or the Advanced CSS Tutorial. These tutorials will help you better grasp the most required CSS concepts.

Besides learning CSS programming, you also need to get acquainted with other front-end programming languages because CSS is just a styling language that will allow you to style a page, which you can create using other front-end technologies. Hence, to become a successful front-end developer and land a high-paying job, learning all the major front-end programming languages is vital. You can enroll in our Post Graduate Program in Full-Stack Web Development, or opt for our 90-day free Front-End Web Development Course. These programs offer several hours of applied learning and hands-on practice for better understanding of concepts. Also, on course completion, you get a certification that will add credibility to your resume and help you find better job opportunities.

About the Author

SimplilearnSimplilearn

Simplilearn is one of the world’s leading providers of online training for Digital Marketing, Cloud Computing, Project Management, Data Science, IT, Software Development, and many other emerging technologies.

View More
  • Disclaimer
  • PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, and OPM3 are registered marks of the Project Management Institute, Inc.
  • *According to Simplilearn survey conducted and subject to terms & conditions with Ernst & Young LLP (EY) as Process Advisors