The CSS Box Model Explained: Content, Padding, Border, Margin

The CSS box model describes every element as a rectangular box made of four layers, from inside out: content (the actual text/image), padding (space inside the border), border, and margin (space outside the border, between this element and others).

Common causes

• By default (box-sizing: content-box), the width/height properties only set the content area's size — padding and border are added on top, which often makes an element render larger than its declared width

How to fix it

• Set box-sizing: border-box (often applied globally to *) so width/height include padding and border, making sizing far more predictable
• Use margin to control spacing between elements, and padding to control spacing between an element's border and its own content
• Remember margins between adjacent block elements can 'collapse' into a single margin equal to the larger of the two — a common source of unexpected spacing

Example

* { box-sizing: border-box; }

.card {
  width: 300px;      /* now includes padding + border */
  padding: 20px;
  border: 1px solid #ccc;
}

FAQ

Why is my element wider than the width I set?

You're likely using the default box-sizing: content-box, where padding and border add to the declared width instead of being included in it. Switch to box-sizing: border-box.