Class 11 - The Box Model

CSS Foundations

The Box Model 📦

CSCI 3403 - Web Programming

Week 6, Class 11

Today: The most fundamental CSS concept! 🎯

Today's Learning Objectives

Quick Recap

Our CSS Journey So Far:

Today's Focus:

Layout fundamentals - How elements take up space!

The #1 CSS Concept 🤯

Everything on a webpage is a
RECTANGULAR BOX

Yes, even circles!

Let's See the Boxes! 👀

* {
  outline: 2px solid red;
}

Try It Now!

Open DevTools on any website:

  1. Right-click → Inspect
  2. In Styles panel, click the + button
  3. Add the CSS above
  4. Watch the magic happen!

Every element is contained in a box!

The Box Model 📦

Content

Every box has four parts!

Box Model Components

From Inside to Outside:

  1. Content: The actual content (text, images)
  2. Padding: Space between content and border
  3. Border: The edge of the box
  4. Margin: Space outside the border
Memory Trick: "Content Pads the Border from the Margin" (CPBM)

1. Content 📝

.box {
  width: 300px;
  height: 150px;
}
300px × 150px content

2. Padding 🛡️

.box {
  padding: 20px;
  /* or individually: */
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}

Padding Shorthand ⚡

4 Values

padding: 10px 20px 30px 40px;
/* top right bottom left */
/* Clockwise from top! */

2 Values

padding: 10px 20px;
/* vertical horizontal */
/* top/bottom left/right */
Remember: Think of a clock! Start at 12 and go clockwise.

3. Border 🔲

.box {
  border: 5px solid #764ba2;
  /* width style color */

  /* or separately: */
  border-width: 5px;
  border-style: solid;
  border-color: #764ba2;
}

Border Styles:

4. Margin 🌊

.box {
  margin: 20px;
  /* Creates space OUTSIDE the border */

  /* Center horizontally: */
  margin: 0 auto;
}

Live Demo Time! 🎬

Let's Build a Box Together

We'll create a card component with:

  • Content area with text
  • Padding for breathing room
  • A nice border
  • Margin to separate from other elements

Open VS Code and follow along!

The Box-Sizing Problem 😤

You set width: 200px, but your box is 260px wide!

.box {
  width: 200px;
  padding: 20px;
  border: 10px solid black;
}

Actual width:

200px (content) + 40px (padding) + 20px (border) = 260px

This is the default content-box behavior!

The Border-Box Solution! ✨

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 10px solid black;
}

With border-box:

Total width = 200px (includes padding and border!)

Pro Tip: Width now means the TOTAL width, not just content!

Set Border-Box for Everything! 🌍

/* Add this to the top of your CSS! */
*, *::before, *::after {
  box-sizing: border-box;
}

Why use border-box?

Always include this in your projects from now on!

Content-Box vs Border-Box

content-box (default)

width: 200px

Actual: 260px wide

200 + 40 (padding) + 20 (border)

border-box

width: 200px

Actual: 200px wide

Padding and border included!

Margin Collapsing 🤝

When vertical margins meet, they collapse!

.box1 {
  margin-bottom: 30px;
}

.box2 {
  margin-top: 20px;
}

Space between boxes = 30px (not 50px!)

The larger margin wins!

Note: Only happens with vertical margins, not horizontal!

Centering Elements 🎯

The Classic Technique: margin: auto

.centered-box {
  width: 500px;
  margin: 0 auto;
  /* top/bottom: 0, left/right: auto */
}
Centered!
Requirements: Element must have a defined width!

Quick Practice 💪

10-Minute Challenge

Create a card component with:

  1. Width of 300px
  2. 20px padding all around
  3. 3px solid border (your choice of color)
  4. Centered on the page
  5. Use border-box sizing
/* Starter code */
.card {
  /* Your styles here */
}

DevTools Box Model Viewer 🔍

Let's Explore!

  1. Right-click any element → Inspect
  2. Look for the "Box Model" diagram
  3. Hover over different sections
  4. See the measurements for each part
Colors in DevTools:
  • Blue = Content
  • Green = Padding
  • Yellow/Orange = Border
  • Orange/Pink = Margin

When to Use What? 🤔

Use Padding

  • Space inside a button
  • Text breathing room
  • Card/container spacing
  • Background needs to extend

Use Margin

  • Space between elements
  • Centering blocks
  • Creating gaps in layouts
  • Pushing elements apart

Pro Tips 💡

Debug Tip: Can't figure out spacing? Add temporary background colors!

Avoid These Mistakes! ⚠️

Homework Assignment 📚

Due: Before Next Class

Your Tasks:

  1. Complete the MDN Box Model Challenge:
    MDN Box Model Tasks
  2. Add your completed Box Model challenge to your one-page website
  3. Use:
    • All four box model properties
    • border-box sizing
    • Center at least one element

Push to GitHub and submit link on D2L!

Extra Practice Resources 📖

Videos to Watch:

Articles to Read:

Interactive:

Knowledge Check ✅

Can you answer these?

If unsure about any, review the slides or ask me!

Next Class Preview

CSS Foundations: Block and Inline

Building on today's box model knowledge! 🏗️

Today's Key Takeaways 🎯

Master the box model = Master CSS layout!

Excellent Work! 🌟

You Now Understand CSS Fundamentals!

The box model is THE foundation

Practice with DevTools

Experiment and break things!

See you Thursday! 👋

Don't forget your homework!

1 / 30