CSS Advanced

CSS Box Sizing

The box-sizing property decides whether an element's declared width and height include its padding and border. Understanding it removes the most common source of layout maths confusion. This guide compares content-box and border-box with live examples.

The Box Model and box-sizing

Every element is a box made of content, padding, border and margin. box-sizing controls whether the width and height you set apply to just the content, or to the content plus padding and border. This single choice changes how every sized element on the page adds up.

content-box (Default)

With content-box, width sets only the content area. Any padding and border are added on top, so the rendered box is wider than the number you wrote. A 200px width with 20px padding and a 5px border renders 250px wide.

.box {
  box-sizing: content-box; /* the default */
  width: 200px;
  padding: 20px;
  border: 5px solid;
  /* Rendered width = 200 + 20 + 20 + 5 + 5 = 250px */
}

border-box

With border-box, width includes the padding and border. The content area shrinks to make room so the rendered box stays exactly the width you set. The same 200px box renders 200px wide regardless of padding or border.

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid;
  /* Rendered width = exactly 200px */
}

See the Difference

Both boxes below declare the same width, padding and border. Only box-sizing differs, yet they render at different widths.

Run this — same numbers, different widths

Example

<!DOCTYPE html>
<html>
<head>
<style>
  .box {
    width: 220px;
    padding: 20px;
    border: 5px solid #4f46e5;
    margin-bottom: 12px;
    background: #eef2ff;
    font: 14px sans-serif;
  }
  .content { box-sizing: content-box; }
  .border  { box-sizing: border-box; }
</style>
</head>
<body>
  <div class="box content">content-box: renders 270px wide (220 + padding + border)</div>
  <div class="box border">border-box: renders exactly 220px wide</div>
</body>
</html>

	content-box	border-box
width applies to	Content only	Content + padding + border
Adding padding	Grows the box	Shrinks the content
Rendered width	Larger than declared	Equals declared width
Best for	Legacy default	Predictable layouts

The Global Reset

Most modern projects apply border-box to every element at the top of the stylesheet. This makes widths behave intuitively everywhere and is one of the most widely used CSS snippets.

Run this — border-box makes 50% + 50% fit

Example

<!DOCTYPE html>
<html>
<head>
<style>
  *, *::before, *::after { box-sizing: border-box; }
  .col {
    width: 50%;
    padding: 16px;
    border: 2px solid #059669;
    float: left;
    background: #ecfdf5;
    font: 14px sans-serif;
  }
</style>
</head>
<body>
  <div class="col">Column A</div>
  <div class="col">Column B</div>
</body>
</html>

💡

Start almost every project with *, *::before, *::after { box-sizing: border-box; }. It prevents padding from breaking width-based layouts.

⚠️

With content-box, two 50%-wide columns that also have padding will total more than 100% and wrap or overflow. border-box avoids this entirely.

Key points

box-sizing decides whether width/height include padding and border.
content-box (default) adds padding and border on top of the width.
border-box includes padding and border inside the declared width.
border-box makes percentage layouts with padding add up correctly.
Apply border-box globally with the universal selector for predictable sizing.