Padding and box-sizing

You will be able to predict an element's rendered width by controlling padding and box-sizing.

What it is

Padding is empty space inside an element, between its content and its border. CSS uses a box model: content, padding, border, and margin. The box-sizing property changes what width and height refer to. With the default content-box, width describes only the content area, so padding and border are added outside it. With border-box, width describes the content plus padding plus border, so the element's total visible width stays closer to the value you set. Related terms include computed width, padding box, border box, and margin box.

Why it matters

• It prevents fixed-width cards, buttons, and form fields from overflowing when you add padding.
• It makes responsive grids easier because columns can keep their intended width while still having inner spacing.
• It reduces the need for calc() or negative margins to compensate for padding.
• It helps align components visually when borders and padding differ.

Syntax or steps

The smallest useful pattern is to set a width, add padding, then choose box-sizing:

.box {
  width: 200px;
  padding: 20px;
  box-sizing: border-box; /* total width stays 200px */
}

With content-box, total width is width + left padding + right padding, plus border if present. With border-box, total width is the declared width, and the content area shrinks to fit the padding and border. Padding shorthand can be one value for all sides, two values for vertical/horizontal, or four values for top/right/bottom/left.

Example

/* Default: padding and border add to width */
.card-content-box {
  width: 200px;
  padding: 20px;
  border: 2px solid #333;
  box-sizing: content-box;
}

/* Improved: padding and border are included in width */
.card-border-box {
  width: 200px;
  padding: 20px;
  border: 2px solid #333;
  box-sizing: border-box;
}

/* Common reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

Part by part: .card-content-box has a total width of 200 + 20 + 20 + 2 + 2 = 244px. .card-border-box has a total width of 200px, leaving 200 - 20 - 20 - 2 - 2 = 156px for content. The reset applies border-box to all elements and pseudo-elements, which is a common starting point for predictable layout.

Common mistakes

• Assuming width always means visible width. Fix: remember the default is content-box, and inspect the box model in browser DevTools.
• Forgetting that border also affects total width. Fix: include border in calculations; border-box includes padding and border, but not margin.
• Setting box-sizing only on a parent. Fix: apply it to children too, or use a universal reset.
• Using padding to create gaps between siblings and then fighting overflow. Fix: use margins for outside spacing, or gap in flex and grid layouts.

When to use it

Use border-box for most UI components. Use content-box when the inner content area must have an exact size, such as a text column or a component that expects its content width to match a given value.

Practice

Guided exercise: create a panel with width: 300px, padding: 16px, border: 1px solid gray, and box-sizing: border-box. Expected total width: 300px. Expected content width: 300 - 16 - 16 - 1 - 1 = 266px.

Challenge: change the same panel to box-sizing: content-box. What is its total width? Solution hint: add horizontal padding and horizontal border to the declared width: 300 + 16 + 16 + 1 + 1 = 334px.

Quick check

Question: An element has width: 100px, padding: 10px, border: 5px, and box-sizing: border-box. What is its total rendered width? Answer: 100px. Its content width is 100 - 10 - 10 - 5 - 5 = 70px.

Summary

Padding lives inside the border, and box-sizing decides whether width includes that padding. border-box makes the declared width match the visible box width, which is usually easier for layout, while content-box keeps width as the inner content size.