Previous
Written by: rJTutorial Team | Last Updated:

CSS Box-Sizing

In CSS, every element is treated as a rectangular box. The box-sizing property is a fundamental layout tool that determines how the total width and height of an element are calculated. By default, adding padding or borders to an element increases its physical size on the screen, which can often break layouts. Using box-sizing allows you to choose whether these values should be added to the dimensions or contained within them.

Developer Tip: Think of box-sizing as a way to tell the browser whether the "width" you set is the size of the room (content) or the size of the entire building (including the walls).

Box Sizing Values

There are two primary values for the box-sizing property that change the behavior of the CSS Box Model:

content-box (Default):

This is the standard behavior defined by the original CSS specification. When you set a width of 200px, that width applies only to the content area. If you then add 20px of padding and a 5px border, the actual space the element occupies on the screen grows to 250px (200 + 20 + 20 + 5 + 5).

  • Width and height only apply to the content area of the element.
  • Padding and border are added outside the specified width and height, increasing the total footprint.
.element {
    box-sizing: content-box;
}
Common Mistake: Beginners often set an element to width: 100% and then add padding, only to find that the element overflows its parent. This happens because content-box adds the padding on top of that 100%.

border-box:

This is the most popular value for modern web development. When you set an element to 200px wide with border-box, the browser ensures the entire box is exactly 200px. If you add padding or borders, the content area inside shrinks to make room for them.

  • Width and height include the content, padding, and border.
  • Padding and border "absorb" space from the inside rather than expanding the box outward.
.element {
    box-sizing: border-box;
}
Best Practice: Most professional developers apply box-sizing: border-box; to all elements at the start of a project to make layout math much simpler and more predictable.

Example

To see the difference in action, consider two boxes with identical CSS properties, but different box-sizing values:

<div class="box content-box">Content Box</div>
<div class="box border-box">Border Box</div>
.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 10px solid #333;
    margin-bottom: 20px;
    background-color: lightblue;
}

.content-box {
    box-sizing: content-box;
    /* Total rendered width: 200 + 20 + 20 + 10 + 10 = 260px */
}

.border-box {
    box-sizing: border-box;
    /* Total rendered width: 200px (Exactly as specified) */
}

In this example:

  • The .content-box div becomes much larger than 200px. Because it uses the default model, the padding and thick border are tacked onto the outside, resulting in a total width of 260px.
  • The .border-box div remains exactly 200px wide. The browser automatically shrinks the area available for text to 140px (200 - 40 padding - 20 border) to accommodate the styling within the defined width.
Watch Out: The box-sizing property does not include the margin. Margins always exist outside the box and will still add to the total space an element takes up in the document flow.

Use Cases

  1. Responsive Layouts: Using border-box is essential for fluid grids. If you have two columns set to width: 50%, adding a border or padding with content-box would push the total width over 100%, causing the columns to wrap or break. border-box keeps them perfectly aligned at 50%.
  2. Form Elements: Inputs and textareas often have default browser padding and borders. Applying border-box ensures that an input with width: 100% fits perfectly inside its container without bleeding over the edges.
  3. Third-party Components: If you are integrating a widget or a plugin, box-sizing helps ensure that your site's global styles don't accidentally distort the widget's internal layout.

Additional Notes

  • Inheritance: Technically, box-sizing is not an inherited property in the traditional sense. However, many developers use a "global reset" to ensure all child elements follow the same rule.
  • Browser Support: box-sizing is supported in all modern browsers (Chrome, Firefox, Safari, Edge). Older versions of Internet Explorer (IE7 and below) did not support it, but since those browsers are no longer in common use, you can safely use border-box in almost any project today.
Developer Tip: The most common way to apply this globally is using the following CSS snippet. This ensures every element (and its pseudo-elements) uses the intuitive border-box model: 
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Understanding and using box-sizing appropriately is one of the quickest ways to move from "fighting with CSS" to creating consistent, predictable layouts that work across all screen sizes.

Previous