CSS box-sizing Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The box-sizing property controls how an element’s rectangular box is measured and how that measurement relates to the spaces added around its content. In other words, it changes whether the element’s set width and height refer only to the content area or to the content plus other parts of the box. This subtle distinction has a big effect on layout calculations and the way elements fit together in a flow.

When you change how an element’s box is calculated, it directly affects how values like padding and border influence the element’s overall footprint. With one calculation model, adding padding or border increases the element’s outer size; with the alternative model, the outer size stays fixed and those decorations are accommodated within the specified dimensions. Note that spacing created by margin remains outside of those inner calculations and still pushes other elements away.

This property is particularly useful when building responsive or component-based layouts: it makes sizing predictable, reduces the need for manual arithmetic when adding padding and borders, and simplifies creating consistent cards, buttons, or grid cells. It also interacts with different layout contexts (for example, elements with different display behaviors), so being explicit about the box measurement model helps avoid unexpected overflows and alignment issues across block, inline, flex, and grid containers.

In practice, deciding which measurement model to use is often about clarity and intent - whether you want components to occupy a constant outer size regardless of decorative additions, or whether padding and borders should increase the space an element consumes. When debugging layout problems, check which model an element uses so you can reason correctly about computed sizes in the inspector and make consistent choices across your stylesheet.

Definition

Initial value: content-box
Applies to: All elements that accept width or height
Inherited: No
Computed value: Specified value
Animatable: No
JavaScript syntax: object.style.boxSizing

Interactive Demo

box-sizing: content-box;
width: 100%;

box-sizing: content-box;
width: 100%;
border: solid #5B6DCD 10px;
padding: 5px;

box-sizing: border-box;
width: 100%;
border: solid #5B6DCD 10px;
padding: 5px;

Parent container

Child container

Syntax

box-sizing: content-box | padding-box | border-box | inherit

Values

content-boxThis is the default style as specified by the CSS standard. The width and height properties are measured including only the content, but not the border, margin, or padding.
padding-boxThe width and height properties include the padding size, and do not include the border or margin.
border-boxThe width and height properties include the padding and border, but not the margin. This is the box model used by Internet Explorer when the document is in Quirks mode

Example

HTML

<div class='demo'>

  <h1>CSS box-sizing example</h1>

  <div class='row'>

    <div class='card'>

      <h2>content-box (default)</h2>

      <div class='box content-box'>

        Width: 200px<br>

        Padding: 20px<br>

        Border: 4px

      </div>

    </div>



    <div class='card'>

      <h2>border-box</h2>

      <div class='box border-box'>

        Width: 200px (includes padding & border)

      </div>

    </div>

  </div>

</div>

CSS

/* Layout */
.demo {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  padding: 24px;
  color: #111;
}

.row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.card {
  width: 320px;
}

h1 {
  font-size: 18px;
  margin: 0 0 12px;
}

h2 {
  font-size: 14px;
  margin: 0 0 8px;
  font-weight: 600;
}

/* Demonstration boxes */
.box {
  width: 200px;               /* set the same width on both boxes */
  padding: 20px;              /* extra space inside the box */
  border: 4px solid rgba(0,0,0,0.12);
  background: #f3f6fb;
  box-sizing: content-box;    /* explicit default behavior */
}

.box.border-box {
  box-sizing: border-box;     /* include padding and border in the 200px width */
  background: #eefcef;
  border-color: rgba(0,128,0,0.2);
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS box-sizing property. Hover over a browser icon to see the version that first introduced support for this CSS property.