Why do my elements end up wider than the width I set?

Because of the default box model (content-box), the width you set applies only to the content. Any padding and border you add are placed on top, making the visible box wider than your number. The fix is box-sizing: border-box, which folds padding and border into the width so the box ends up exactly as wide as you asked.

When should I use padding and when should I use margin?

Use padding to create breathing room inside an element, between its content and its edge — like the space inside a button. Use margin to create space between separate elements — like the gap between two cards. A simple rule: padding pushes inward, margin pushes outward.

The CSS Box Model Explained | Coding

Every element is a box

Open any web page and, invisible to the eye, every single element — every heading, paragraph, image and button — sits inside a rectangular box. Understanding how that box is built is the single most useful idea in CSS layout. Once it clicks, spacing stops feeling like guesswork and starts feeling like control. This lesson builds on Styling Web Pages with CSS, so it helps to know how to write a basic rule first.

The box model describes four layers wrapped around your content, from the inside out:

+-------------------------------+   margin   (space outside)
|  +-------------------------+  |   border   (the edge line)
|  |  +-------------------+  |  |   padding  (space inside)
|  |  |     CONTENT       |  |  |   content  (text, image...)
|  |  +-------------------+  |  |
|  +-------------------------+  |
+-------------------------------+

The four layers

Content — the actual text or image. Its size is set by width and height.
Padding — clear space inside the box, between the content and the border. It shares the element's background colour.
Border — a line drawn around the padding. You control its thickness, style and colour.
Margin — clear space outside the border, pushing other elements away. It is always transparent.

A handy way to remember the difference: padding is the cushion inside a parcel protecting the contents; margin is the empty space around the parcel keeping it apart from others.

Here is each layer in CSS:

.box {
  width: 200px;
  padding: 20px;                 /* space inside */
  border: 4px solid #2563eb;     /* the edge */
  margin: 16px;                  /* space outside */
}

The catch: width is not the whole width

Here is the part that trips up nearly every beginner. With the default box model, the width you set applies only to the content. Padding and border are added on top. So the box above is not 200px wide on screen — it is:

total width = content + left padding + right padding + left border + right border
            = 200 + 20 + 20 + 4 + 4
            = 248px

You asked for 200, you got 248. Multiply that surprise across a whole layout and columns overflow, rows break, and nothing lines up.

The fix: box-sizing: border-box

There is a one-line cure. Setting box-sizing: border-box tells the browser to make the declared width include padding and border. The content simply shrinks to fit. Now width: 200px really means 200px on screen, no matter how much padding you add:

.box {
  box-sizing: border-box;
  width: 200px;       /* now the WHOLE box is 200px */
  padding: 20px;
  border: 4px solid #2563eb;
}

Most developers apply this to every element at the top of their stylesheet, because it makes layout so much more predictable:

* { box-sizing: border-box; }

Margin collapse: a quirk worth knowing

One more surprise. When two boxes sit stacked on top of each other, their touching vertical margins collapse — they merge into a single margin equal to the larger of the two, not the sum. So if one paragraph has margin-bottom: 20px and the next has margin-top: 30px, the gap between them is 30px, not 50px. This only happens to top and bottom margins; left and right margins never collapse.

A complete worked example

Save this as boxmodel.html and open it. The two cards have identical width and padding, but different box-sizing, so you can see the difference with your own eyes.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The Box Model</title>
  <style>
    body { font-family: sans-serif; padding: 24px; background: #f1f5f9; }

    .card {
      width: 200px;
      padding: 20px;
      border: 4px solid #2563eb;
      margin: 16px 0;
      background: #dbeafe;
    }

    /* Default: width is content only -> total 248px */
    .content-box { box-sizing: content-box; }

    /* Fixed: width includes padding + border -> total 200px */
    .border-box { box-sizing: border-box; background: #dcfce7; border-color: #16a34a; }
  </style>
</head>
<body>
  <div class="card content-box">
    box-sizing: content-box — I look 248px wide on screen even though width is 200px.
  </div>

  <div class="card border-box">
    box-sizing: border-box — I am exactly 200px wide, padding and border included.
  </div>
</body>
</html>

Reading the result: both cards declare width: 200px and padding: 20px with a 4px border. The blue content-box card renders 248px wide because padding and border are added on top. The green border-box card renders exactly 200px wide because the padding and border fit inside the width. Open your browser's developer tools, hover the elements, and the box model diagram will confirm the numbers.

Try it yourself

Inspect it. Right-click a card, choose Inspect, and find the box model panel. It draws the content, padding, border and margin as coloured layers with their pixel sizes.
Break the layout. Remove box-sizing: border-box from a multi-column layout and watch columns overflow. Add it back to fix them — this is the everyday value of the rule.
Test margin collapse. Stack two paragraphs, give the first margin-bottom: 40px and the second margin-top: 20px, and measure the gap. It should be 40px, not 60px.

Challenge: Build three feature cards side by side using CSS Flexbox Basics. Give each width: 33%, padding: 24px and a border. First try it without box-sizing: border-box and watch the cards overflow their row. Then add * { box-sizing: border-box; } and watch them snap into a clean, even row. You will never forget this rule again.

The CSS Box Model Explained

Key takeaways