Glossary · Web Development

CSS Box Model

The CSS box model describes how every element is a rectangle made of content, padding, border and margin, which together determine its size and spacing.

Updated October 6, 2026

The CSS box model treats every element as a box with four layers from inside out: content, padding, border and margin. The sum of these layers decides how much space the element takes up on the page.

Why it matters

Almost every layout bug, such as a column that overflows its container or an unexpected gap, comes from misunderstanding the box model. The box-sizing property decides whether width includes padding and border. With the default content-box, adding padding makes the element wider than declared.

Example

.card { width: 300px; padding: 20px; border: 2px solid #ccc; }

With content-box the card occupies 300 + 40 + 4 = 344px. With box-sizing: border-box it occupies exactly 300px and the content area shrinks to 256px.

Common mistakes

  • Not setting box-sizing: border-box globally, then wondering why two 50% wide columns wrap.
  • Forgetting that vertical margins between block elements can collapse into one.
  • Using margin for spacing inside a component where padding or gap is clearer.

Get notified when this term updates

Plus occasional practical tips on uptime and monitoring, nothing else. Unsubscribe anytime.

Keep reading

Glossary · Web DevelopmentCross-Browser CompatibilityCross-browser compatibility means a website works and looks acceptable in every browser and version its audience actually uses, despite differences.Glossary · Web DevelopmentCSS GridCSS Grid is a two-dimensional layout system that places content into rows and columns, letting you design whole page layouts directly in CSS.Glossary · Web DevelopmentCSS SelectorA CSS selector is the pattern in a stylesheet rule that picks which HTML elements the declared styles apply to, such as a tag, class, ID or attribute.Error fix · Developer errorsCannot connect to the Docker daemon" Fix: Is the Daemon Running?Fix "Cannot connect to the Docker daemon at unix:///var/run/docker.sock": start the service, fix socket permissions and group, and check DOCKER_HOST.4 min readError fix · Server errorsHTTP 405 Method Not Allowed: Fix GET, POST and OPTIONS ErrorsFix HTTP 405 Method Not Allowed: read the Allow header, correct form and API methods, nginx static POST, Apache limits, CORS preflight and redirect method changes.4 min readError fix · Server errorsHTTP 415 Unsupported Media Type: Fix Content-Type Errors in APIsFix HTTP 415 Unsupported Media Type: send the correct Content-Type, match what the API accepts, handle charset and multipart uploads, and debug Spring, Express and Laravel.4 min read

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.