The Box Model

The previous topic resolved which declarations an element receives. The value is now settled: a cell’s padding value is 8px 12px. But what that value means was never said. Where on the cell do the 8 pixels get added? Does the added space grow the cell’s total width, or does it shrink the area of the text inside it?

The answer to these questions is the box model. The model is summed up in one sentence: every element in the document tree turns into one or more rectangular boxes during layout, and each box is made of four nested regions. This lesson defines those four regions and the arithmetic between them.

Four Regions

From outside in:

The margin box is the outermost rectangle. It carries the distance between the box and its neighbors. It is transparent; no background is painted here.

The border box sits inside the margin. The border itself is drawn on this region’s boundary.

The padding box sits inside the border. It carries the distance between the content and the border. Unlike the margin, the background extends this far.

The content box is the innermost rectangle. Text, an image, or child boxes sit here.

Three boundaries separate the regions, and each has its own name: the content edge, the padding edge, the border edge, the margin edge. These names appear in the values of properties like background-clip, background-origin, and box-sizing.

Arithmetic

Each region’s size is found by adding two edges to the region inside it. On the horizontal axis:

$$\text{padding width} = \text{content width} + p_{\text{left}} + p_{\text{right}}$$ $$\text{border width} = \text{padding width} + b_{\text{left}} + b_{\text{right}}$$ $$\text{margin width} = \text{border width} + m_{\text{left}} + m_{\text{right}}$$

On the vertical axis the same sums are made with the top and bottom edges. The program below runs these sums for two boxes: a cell in the measurement table and the page’s masthead.

// box-measure.mjs — computes the bounds of a box's four regions
function measureBox({ contentW, contentH, padding, border, margin }) {
  const [pt, pr, pb, pl] = padding;   // top, right, bottom, left
  const [bt, br, bb, bl] = border;
  const [mt, mr, mb, ml] = margin;
  const paddingBoxW = contentW + pl + pr;
  const paddingBoxH = contentH + pt + pb;
  const borderBoxW = paddingBoxW + bl + br;
  const borderBoxH = paddingBoxH + bt + bb;
  const marginBoxW = borderBoxW + ml + mr;
  const marginBoxH = borderBoxH + mt + mb;
  return { paddingBoxW, paddingBoxH, borderBoxW, borderBoxH, marginBoxW, marginBoxH };
}

const cell = {
  contentW: 120, contentH: 24,
  padding: [8, 12, 8, 12],
  border:  [0, 0, 1, 0],
  margin:  [0, 0, 0, 0],
};
const masthead = {
  contentW: 640, contentH: 96,
  padding: [24, 32, 24, 32],
  border:  [0, 0, 4, 0],
  margin:  [0, 16, 32, 16],
};

for (const [name, box] of [["cell", cell], ["masthead", masthead]]) {
  const r = measureBox(box);
  console.log(`--- ${name} ---`);
  console.log(`content     : ${box.contentW} x ${box.contentH}`);
  console.log(`padding box : ${r.paddingBoxW} x ${r.paddingBoxH}`);
  console.log(`border box  : ${r.borderBoxW} x ${r.borderBoxH}`);
  console.log(`margin box  : ${r.marginBoxW} x ${r.marginBoxH}`);
  console.log(`painted area (border box)  : ${r.borderBoxW * r.borderBoxH} px2`);
  console.log(`space occupied (margin box): ${r.marginBoxW * r.marginBoxH} px2`);
}

--- cell ---
content     : 120 x 24
padding box : 144 x 40
border box  : 144 x 41
margin box  : 144 x 41
painted area (border box)  : 5904 px2
space occupied (margin box): 5904 px2
--- masthead ---
content     : 640 x 96
padding box : 704 x 144
border box  : 704 x 148
margin box  : 736 x 180
painted area (border box)  : 104192 px2
space occupied (margin box): 132480 px2

The cell shows two observations. The padding: 8px 12px declaration, once expanded into four values, added $12 + 12 = 24$ pixels horizontally and $8 + 8 = 16$ pixels vertically: content width went from 120 to 144, height from 24 to 40. Padding does not shrink the text’s area; it grows the box. This is the answer to the question the previous topic asked.

Since only a bottom border was given, the width did not change and the height grew by 1 pixel. Because the margin is zero, the border box and the margin box are the same.

The masthead shows the effect of the margin: the border box is 704 units wide while the margin box is 736. The 32 units in between are not painted, but they hold neighboring boxes at a distance. The difference between the two area calculations — 132480 and 104192 — gives this as a number.

Which Property Applies to Which Region

The box model’s practical value is knowing how far each visual property extends.

Property	Region it covers
background-color	Content + padding + border (up to the border box)
background-image	Placed in the padding box by default, painted up to the border box
border	On the boundary of the border box
box-shadow	Outside the border box (or inside it with inset)
outline	Outside the border box, without taking up space

Two rows deserve extra emphasis.

The background covers the padding. When a button gets a background color and padding, the colored area is larger than the text — the padding has been painted. If the same space had been given as margin instead, the colored area would be only as large as the text. This is why the two declarations have different visual results.

An outline takes up no space. outline is drawn outside the border box but does not affect layout; neighboring boxes sit as if nothing were there. This is why the focus indicator is given with outline: the page does not shift when focus changes. If the same job were done with border, the box would grow on every focused element and everything around it would shift.

Logical Edges

There are two ways to name edges. Physical names are based on the screen: margin-top, padding-left, border-right. Logical names are based on writing direction: margin-block-start, padding-inline-start, border-inline-end.

Logical names define two axes. The inline axis is the direction text flows in; in a document written left to right, that is left to right. The block axis is the direction lines stack in; in the same document, top to bottom.

In a document written right to left, padding-inline-start lands on the right edge, while padding-left still stays on the left edge. Logical names are preferred so that the style does not need to be rewritten when the document’s language changes. Logical names are used throughout this course; the information the lang attribute carries, from the Web Fundamentals and HTML course, finds its counterpart here.

Shorthands for all four edges also exist in logical form: margin-block sets both block edges at once, margin-inline sets both inline edges. The margin-inline: auto notation is the standard way to center a block horizontally.

The Station Page’s Dimensions

/* station.css — step 8: box dimensions */
.masthead {
  padding-block: 24px;
  padding-inline: 32px;
  margin-inline: 16px;
  margin-block-end: 32px;
  border-block-end: 4px solid #143a52;
  background-color: #f5f7f8;
}

.measurement-table th,
.measurement-table td {
  padding-block: 8px;
  padding-inline: 12px;
  border-block-end: 1px solid #d5dbe0;
}

The masthead’s background color covers the padding; a gap of 24 and 32 units remains between the heading and the edge of the colored area. The margin, on the other hand, sits outside the colored area and keeps the masthead away from the edges.

In the cells, padding is 12 units horizontally, 8 vertically. What makes the table readable is not the text itself but this gap between cells: once the padding is removed, columns stick together and the bottom border alone is not enough to tell columns apart.

Summary

• Every element turns into a box during layout; the box is made, from outside in, of the margin, border, padding, and content regions.
• Each region’s size is found by adding two edges to the one inside it; padding does not shrink the content, it grows the box.
• The background extends up to the border box and covers the padding; the margin is transparent and only keeps neighbors at a distance.
• outline is drawn outside the border box but takes up no space; the focus indicator is given with it for this reason — with border instead, layout would shift as focus changed.
• Logical edge names resolve according to writing direction; the block axis is the direction lines stack in, the inline axis is the direction text flows in.

Next Step

This lesson never gave the box a width; the content width was given, and the outer dimensions were computed from it. But writing styles is usually done the other way around: a width is declared, and the content size is derived from it. There are two separate models for this derivation, and the difference between them changes a box’s total width. The next lesson compares the two models using the same numbers.