The box model

Leyla gave a card width: 300px, then added some padding and a border — and suddenly the card no longer fit in a 300-pixel column. Why? Because to the browser, every element on a page is a box, and its size is more than just width. Once you understand the box model, half of all CSS surprises disappear.

Every element is a box

A box has four layers, from the inside out. Think of a parcel: the item inside is the content, the foam around it is the padding, the cardboard box is the border, and the space between it and the other parcels is the margin.

1. content — the text, image or child elements. Its size is set by width and height.
2. padding — the space between the content and the border. The element's background extends into it.
3. border — the frame of the box: border: 2px solid teal gives the thickness, line style and color.
4. margin — the transparent space between the box and its neighbors.

<style>
  body { font-family: system-ui, sans-serif; padding: 12px; }
  .margin-zone { display: inline-block; background: #fde68a; }
  .box {
    width: 200px;
    padding: 20px;
    border: 6px solid #6366f1;
    margin: 24px;
    background: #e0e7ff;
  }
</style>

<div class="margin-zone">
  <div class="box">Content: 200px wide</div>
</div>
<p>Yellow = margin, blue frame = border,<br>light blue around the text = padding.</p>

Block and inline elements

The display property decides how a box behaves. Block elements (<div>, <p>, <h1>, <ul>) start on a new line and take the full available width. Inline elements (<span>, <a>, <strong>) stay inside the text flow; width and height don't work on them, and vertical margin doesn't push the lines around. inline-block combines the best of both: it stays in the text flow but accepts a size.

<style>
  body { font-family: system-ui, sans-serif; padding: 12px; line-height: 1.8; }
  .demo { background: #fde68a; border: 1px solid #f59e0b; }
  span.demo { width: 300px; }
  .ib { display: inline-block; width: 110px; text-align: center; background: #bbf7d0; }
</style>

<div class="demo">A div is a block: it takes the whole line.</div>
<p>A <span class="demo">span is inline</span>: width 300px is ignored.
  An <span class="ib">inline-block</span> accepts a width.</p>

Padding and margin shorthands

You can set each side separately: margin-top, margin-right, margin-bottom, margin-left. But usually the shorthand is used — one property with one, two, three or four values:

To center a block element that has a width, set its left and right margins to auto: margin: 0 auto. The browser splits the remaining free space equally between the two sides.

<style>
  body { font-family: system-ui, sans-serif; background: #f1f5f9; padding: 12px; }
  .card {
    max-width: 260px;
    margin: 0 auto;
    padding: 12px 20px 20px;
    background: white;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
  }
  .btn { display: inline-block; padding: 8px 16px; border-radius: 999px;
         background: #14b8a6; color: white; }
</style>

<div class="card">
  <h3>Centered card</h3>
  <p>margin: 0 auto puts me in the middle.</p>
  <span class="btn">Read more</span>
</div>

`box-sizing`: how size is counted

By default box-sizing: content-box applies: width is only the width of the content, and padding and border are added on top. That was Leyla's problem. With box-sizing: border-box, width is the width of the whole visible box including the border, and padding and border take their space from the inside. That makes the math much easier.

<style>
  body { font-family: system-ui, sans-serif; padding: 12px; }
  .ruler { width: 200px; height: 6px; background: #1e293b; margin-bottom: 8px; }
  .demo { width: 200px; padding: 20px; border: 5px solid #0ea5e9;
          margin-bottom: 12px; background: #e0f2fe; }
  .bb { box-sizing: border-box; border-color: #f97316; background: #ffedd5; }
</style>

<div class="ruler"></div>
<div class="demo">content-box: 200 + 40 + 10 = 250px</div>
<div class="demo bb">border-box: exactly 200px</div>