Ananta Code Academy
ananta::html-css
MODULE 03 · CSS FOUNDATIONS

The Box Model

Every single HTML element is a rectangular box. Understanding the four layers that make up that box — content, padding, border, and margin — explains almost every spacing question you'll ever have in CSS.

Day 18 of 30 Beginner ~19 min
01 · OVERVIEW

Everything Is a Box

Whether it's a paragraph, an image, or a <div>, the browser treats every element as a rectangular box. That box is made of four layers, nested inside each other, from the inside out: content, padding, border, and margin.

02 · THE FOUR LAYERS

Content, Padding, Border, Margin

Picture the box as rings around a core, largest to smallest going outward: margin, then border, then padding, then content at the center.

THE BOX MODEL, VISUALIZED
MARGIN
BORDER
PADDING
CONTENT
LAYER WHAT IT DOES
Content

The actual text, image, or nested elements. Sized by width and height.

Padding

Space between the content and the border. Shares the box's background color.

Border

A visible (or invisible) line that wraps the padding and content together.

Margin

Space outside the border. Transparent — it separates this box from its neighbors.

03 · SETTING SPACING

Padding & Margin Shorthand

Both padding and margin accept one, two, three, or four values — each pattern controls a different combination of sides.

style.css 
/* One value: all four sides */
.box { padding: 20px; }

/* Two values: vertical | horizontal */
.box { padding: 10px 20px; }

/* Four values: top | right | bottom | left (clockwise) */
.box { margin: 10px 15px 20px 15px; }

/* Individual sides */
.box {
  margin-top: 24px;
  margin-bottom: 0;
}
AUTO MARGINS

margin: 0 auto; is the classic trick for horizontally centering a block element that has a fixed width — the browser splits the remaining space evenly on both sides.

04 · BOX-SIZING

The Property That Changes Everything

By default, width and height only set the content area — padding and border get added on top, making the box bigger than the number you wrote. box-sizing: border-box changes that: width and height now include padding and border, which makes sizing far more predictable.

style.css 
/* content-box (default): width is content only */
.box-a {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  /* renders at 240px wide (200 + 20 + 20) */
}

/* border-box: width includes padding + border */
.box-b {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  /* renders at exactly 200px wide */
}

/* Common reset applied to every element */
* { box-sizing: border-box; }
WHY THIS MATTERS

Most developers add the universal * { box-sizing: border-box; } reset at the top of every stylesheet — it removes a whole category of "why is this wider than I set it" bugs.

05 · MARGIN COLLAPSE

A Common Surprise

When two vertical margins meet — like the bottom margin of one paragraph and the top margin of the next — they don't add together. The browser collapses them into a single margin equal to the larger of the two.

WHAT YOU MIGHT EXPECT 20px bottom margin + 20px top margin = 40px gap between elements.
WHAT ACTUALLY HAPPENS 20px bottom margin + 20px top margin = 20px gap. The larger margin wins.
06 · BREAKDOWN

Breaking Down What You Just Learned

1

Four layersContent, padding, border, and margin nest inside each other from the outside in.

2

Shorthand patternsOne, two, or four values in padding/margin control different combinations of sides.

3

box-sizing: border-boxMakes width and height include padding and border for predictable sizing.

4

Auto marginsmargin: 0 auto centers a fixed-width block element horizontally.

5

Margin collapseAdjacent vertical margins merge into the larger single value, not their sum.

07 · PRACTICE

Try It Yourself

EXERCISE

Build a 200px-wide box with 20px padding and a 5px border, once with box-sizing: content-box and once with border-box. Measure the rendered width of each in your browser's dev tools and compare.

08 · TODAY'S PRACTICE

Build a Centered, Spaced-Out Layout

HANDS-ON EXERCISE

Applying the box model to a real page section

Create day18.html linked to a stylesheet and build a small "profile card" layout.

  1. Add * { box-sizing: border-box; } at the top of your stylesheet.
  2. Build a card div with a fixed width, padding, and a solid border.
  3. Center the card on the page using margin: 0 auto.
  4. Add three paragraphs inside the card and give them consistent margin-bottom spacing.
  5. Open dev tools, inspect the card, and confirm the rendered width matches what you set.
09 · RECAP

Recap

FOUR LAYERS

Content, padding, border, and margin make up every element's box.

BOX-SIZING

border-box includes padding and border inside the declared width.

SHORTHAND

Padding and margin accept one, two, or four values for different side combos.

MARGIN COLLAPSE

Adjacent vertical margins merge into the larger value, not their sum.

10 · SUMMARY

Key Takeaways

  • Every HTML element renders as a box made of content, padding, border, and margin.
  • box-sizing: border-box makes an element's declared width include its padding and border.
  • padding and margin shorthand accept one, two, or four values to target different sides.
  • margin: 0 auto is the standard way to horizontally center a fixed-width block.
  • Adjacent vertical margins collapse into the larger single value rather than adding together.
Course Overview