The box model

1. Principle

Every element on a web page is a rectangular box, even if it doesn't look like one. The box has four parts, nested:

┌─────────────────────────────────┐
│ margin                          │
│  ┌───────────────────────────┐  │
│  │ border                    │  │
│  │  ┌─────────────────────┐  │  │
│  │  │ padding             │  │  │
│  │  │  ┌───────────────┐  │  │  │
│  │  │  │ content       │  │  │  │
│  │  │  │ (text/image)  │  │  │  │
│  │  │  └───────────────┘  │  │  │
│  │  └─────────────────────┘  │  │
│  └───────────────────────────┘  │
└─────────────────────────────────┘

• Content — the actual stuff (text, image).
• Padding — space inside the border, around the content.
• Border — a visible (or invisible) edge.
• Margin — space outside the border, pushing other elements away.

There's one gotcha that trips up every beginner: by default, width: 300px sets the content width, not the total box width. If you add padding or border, the box gets bigger. To make width mean "the whole box," set box-sizing: border-box.

2. Do (you try)

Add this to the top of your styles.css:

/* The right default for every element. */
*,
*::before,
*::after {
box-sizing: border-box;
}

/* Try the box model on one section. */
#about {
padding: 20px;
border: 2px solid navy;
margin: 30px 0;
background: white;
}

Save. Refresh.

3. Verify (how you know)

Visual check: Your About section now has:

• A navy border around it.
• White space inside (padding) between the border and the text.
• Empty space above and below (margin) separating it from other sections.

DevTools box-model panel: Right-click your About section → Inspect. In DevTools, find the Computed tab (or scroll the right panel) — you'll see a colorful diagram of the box model with the exact pixel values of margin, border, padding, and content for that element.

This panel is your friend forever. Use it whenever an element isn't sizing the way you expect.

The border-box check. Comment out the box-sizing rule. Refresh. The About section gets slightly bigger — because now padding and border are added on top of the width. Uncomment to restore.

4. Reference