The box model

Everything is a box

Here is the single most useful idea in CSS: every element on a web page is a rectangular box. A paragraph is a box. A heading is a box. An image, a link, a button, even a single span of text: boxes. A web page is boxes inside boxes, and CSS mostly controls how those boxes are sized, spaced and positioned.

Each box has four layers, from the inside out:

1. Content: the text, image or child elements.
2. Padding: transparent space between the content and the border.
3. Border: a line around the padding (it may be invisible, or have zero width).
4. Margin: transparent space outside the border, pushing other boxes away.

You can see it in the editor. Change the numbers and watch each layer move.

<style>
  .box {
    width: 200px;
    padding: 20px;
    border: 8px solid #7c3aed;
    margin: 30px;
    background: #fde68a;
  }
  body { background: #f3f4f6; }
</style>
<div class="box">Content sits in the middle. The yellow background covers content and padding. The purple line is the border. The grey around it is margin.</div>

Padding and margin: inside versus outside

Beginners often confuse the two. A clear way to separate them:

• Padding is inside the box. It belongs to the element, so the background colour fills it, and clicking on it counts as clicking the element.
• Margin is outside the box. It belongs to the space between elements, and it is always transparent.

Think of a framed picture: the padding is the white mat between the picture and the frame, the border is the frame, and the margin is the wall space between this picture and the next.

Calculating the size

By default, the width and height you set apply to the content only. The space the box really takes is the sum of all layers:

total width = margin-left + border-left + padding-left + content width
            + padding-right + border-right + margin-right

For the box above: content 200, padding 20 + 20, border 8 + 8 and margin 30 + 30 gives 316px of horizontal space, while the visible box (without margin) is 256px. This surprises people who set width: 300px and then add padding and wonder why the box is bigger. The next-but-one lesson, on box-sizing, shows how to switch this behaviour.

Inspecting boxes with developer tools

You do not have to calculate by hand. Every browser has developer tools:

1. Right-click any element and choose Inspect (or press F12).
2. In the Elements (Chrome, Edge) or Inspector (Firefox) panel, look for the Computed tab or the box model diagram.
3. Hover over an element in the HTML tree and the page highlights its box: blue for content, green for padding, orange for margin.

You can edit values live in the Styles pane to test ideas before changing your file. If something has unexpected space, inspecting it takes thirty seconds and ends the guessing.

Shorthand for the four sides

Padding, margin and border can be set for each side or all at once:

.card {
  padding: 16px;            /* all four sides */
  padding: 8px 16px;        /* vertical | horizontal */
  padding: 4px 8px 12px 16px; /* top | right | bottom | left, clockwise */
  margin-top: 24px;         /* one side only */
}

The next two lessons cover these in detail.

Inline elements behave differently

Inline elements such as span and a have boxes too, but they flow in a line of text. Their left and right padding, border and margin work as you expect, but top and bottom padding can overlap neighbouring lines, and top and bottom margin has no effect. When you need a link to be a bigger clickable area, make it a block or inline-block (the display lesson shows how).

Common mistakes

• Using margin when you mean padding, then wondering why the background colour does not reach the edge.
• Forgetting that padding and border add to the width under the default sizing.
• Not inspecting. Guessing at spacing wastes time; the tools tell you.
• Thinking transparent space is empty: margins can overlap or collapse, as the next lesson explains.

Exercise

Make a box that is 240px wide with 16px padding, a 4px solid dark border and a 20px margin, and a light background. Use the editor, then work out how much horizontal space it takes in total.

<style>
  .card { width: 240px; padding: 16px; border: 4px solid #1f2937; margin: 20px; background: #e0f2fe; }
</style>
<div class="card">A box with all four layers.</div>