Skip to main content
Week 02 • Track 05 • The Theory

The Box Model
Beat.

Every website is just boxes inside boxes. Master the invisible rectangles and you master the web.

MARGIN
BORDER
PADDING
CONTENT

The Mental Model

Everything is a Box inside a Box.

A website isn't a canvas—it's a stack of Russian Nesting Dolls. We call this the DOM Tree (Document Object Model).

1

Parents control the layout. They decide how children are arranged.

2

Children fill the space. They inherit rules from parents.

3

Siblings share the same parent. They compete for space.

<body><main> // Parent<div> // Child 1<p>Hello</p></div><div> // Child 2 (Sibling)<p>World</p></div></main></body>
<body>
<main> Parent
Child 1
Hello
Child 2
World

The Anatomy

Theory
The Four Layers

Every element on the web has layers. Beginners mess up layouts because they confuse Padding (Internal) with Margin (External).

Think of it like a picture frame:

  • MarginThe wall space around the frame. Pushes other frames away.
  • BorderThe frame itself. Visible edge with color and thickness.
  • PaddingThe matting inside the frame. Space between frame and photo.
  • ContentThe actual photo. Your text, images, or child elements.

Pro tip: Use box-sizing: border-box to include padding and border in width calculations.

The Box Model

Margin (orange)
Border (yellow)
Padding (green)
Content

DevTools shows these exact colors when you inspect elements

Layout Engine 01
↔️

Flexbox

display: flex

One-dimensional layout. Items flow in a single direction—row or column. Perfect for navbars, button groups, and centering.

Use when: Aligning items in a line, distributing space evenly, centering anything.
1
2
3
display: flex; justify-content: center; align-items: center; gap: 8px;
Layout Engine 02
▦

Grid

display: grid

Two-dimensional layout. Rows AND columns simultaneously. Like a spreadsheet. This bento grid you're looking at? That's CSS Grid.

Use when: Card layouts, image galleries, page layouts, anything with rows and columns.
span 2
span 2
1
2
display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
Display Types

Block vs. Inline vs. Inline-Block

Block Elements <div>, <p>, <h1>

Greedy. Takes full width. Forces a new line before and after.

Inline Elements <span>, <a>, <strong>

Humble. Only takes needed space. Flows with text. Can't set width/height.

Inline-Block display: inline-block

Best of both. Flows inline but accepts width/height. Great for buttons.

Block elements stack vertically:

div (width: 100%)
another div

Inline elements flow with text:

I am text with a span and a link inside.

Inline-block for buttons:

Button 1Button 2

The Position Property

By default, elements follow the document flow—stacking top to bottom. The position property lets elements break free.

Default

Static

Normal document flow. Can't use top/left/right/bottom.

default
Offset

Relative

Offset from its normal position. Space is preserved.

top: 8px
Important!

Absolute

Removed from flow. Positioned relative to nearest positioned ancestor.

top:0 right:0
Viewport

Fixed

Positioned relative to viewport. Stays put when scrolling.

scroll content
fixed navbar

⚠️ Key Rule: An absolute element looks for the nearest ancestor with position: relative. If none exists, it uses the viewport. Always set position: relative on the parent container!

Z-Index & Stacking

The Z-Axis

X is horizontal. Y is vertical. Z is depth—what's on top of what. Higher z-index = closer to user.

z-index: 1
z-index: 2
z-index: 3

Common Z-Index Scale

Use a consistent scale to avoid z-index wars. Here's a practical system:

-1Background elements
0Default (auto)
10Dropdowns, tooltips
50Fixed navbar
100Modals, overlays
9999Emergency overrides only!

Responsive Thinking

Breakpoints

Design for mobile first, then add styles for larger screens. Tailwind's breakpoints make this intuitive.

sm:640pxLarge phones
md:768pxTablets
lg:1024pxLaptops
xl:1280pxDesktops

Mobile-First Example

<!-- Mobile: Stack vertically -->
<!-- md+: Side by side -->

<div class="
flex flex-col // default
md:flex-row // 768px+
gap-4
">

💡 Remember: No prefix = mobile. Prefixes (sm:, md:) = that size and up.

The Exercises

Train your eyes to see the matrix.

01

X-Ray Vision

Browser DevTools

  • →Right-click any website → Inspect
  • →Hover elements in the HTML tree
  • →See the colored box model overlay
Orange=Margin, Green=Padding, Blue=Content
02

Napkin Sketch

Before You Code

  • →Draw a big rectangle (viewport)
  • →Slice into header, main, footer
  • →Label: "Flex" or "Grid" on each
10 minutes of sketching saves 2 hours of debugging
03

Clone a Card

Hands-On Practice

  • →Pick any card component online
  • →Recreate with HTML + Tailwind
  • →Focus on spacing, not perfection
Try: Stripe's pricing cards or Linear's feature cards

📋 Quick Reference Cheatsheet

Centering

flex items-center justify-center

Spacing

p-4 m-4 gap-4 space-y-4

Positioning

relative absolute top-0 right-0
Proceed to Track 06: Vision-to-Vibe