Lesson 8: The Box Model - Understanding Element Spacing

What You'll Learn

What div elements are and why they're important
What the box model is
Margin, padding, border, and content
How to control element size
Width and height properties
Box-sizing property
Common spacing techniques

Why This Matters

Every element on a web page is a rectangular box. Understanding the box model is fundamental to controlling layout, spacing, and sizing. It's essential for creating professional layouts.

Part 1: Understanding Divs

Before we dive into the CSS box model, we need to understand the <div> element - the most common building block for layouts.

What is a Div?

<div> stands for "division" or "section". It's a generic container used to group content together.

Example:

<div>
    <h2>Welcome</h2>
    <p>This is some content inside a div.</p>
</div>

Why Use Divs?

Divs help you:

Group related content together
Apply styles to sections of your page
Create layouts by positioning groups of elements
Organize your HTML logically

Div vs Other Elements

Div is generic:

<div>Generic container - no meaning</div>

Semantic elements have meaning:

<header>Header content</header>
<nav>Navigation</nav>
<main>Main content</main>
<footer>Footer content</footer>
<section>Section of content</section>
<article>Article content</article>

When to use div:

When there's no semantic element that fits
For styling and layout purposes
To group elements together

Basic Div Example

<!DOCTYPE html>
<html>
<head>
    <title>Divs Example</title>
</head>
<body>
    <div>
        <h1>My Website</h1>
        <p>Welcome to my site!</p>
    </div>
    
    <div>
        <h2>About Me</h2>
        <p>I'm learning web development.</p>
    </div>
    
    <div>
        <h2>Contact</h2>
        <p>Email: hello@example.com</p>
    </div>
</body>
</html>

By default, divs are invisible - they just group content. You need CSS to make them visible and styled!

Divs with Classes

Classes help you identify and style specific divs:

<div class="header">
    <h1>Header Content</h1>
</div>

<div class="main-content">
    <p>Main content goes here</p>
</div>

<div class="sidebar">
    <p>Sidebar content</p>
</div>

<div class="footer">
    <p>Footer content</p>
</div>

Nested Divs

You can put divs inside divs:

<div class="container">
    <div class="header">
        <h1>Title</h1>
    </div>
    
    <div class="content">
        <div class="main">
            <p>Main content</p>
        </div>
        <div class="sidebar">
            <p>Sidebar</p>
        </div>
    </div>
</div>

Now let's learn how to style these divs with CSS!

Part 2: The CSS Box Model

Every HTML element is a box with four areas:

┌─────────────────────────────────────┐
│          MARGIN (transparent)       │
│  ┌──────────────────────────────┐   │
│  │     BORDER                   │   │
│  │  ┌───────────────────────┐   │   │
│  │  │   PADDING             │   │   │
│  │  │  ┌────────────────┐   │   │   │
│  │  │  │   CONTENT      │   │   │   │
│  │  │  │                │   │   │   │
│  │  │  └────────────────┘   │   │   │
│  │  └───────────────────────┘   │   │
│  └──────────────────────────────┘   │
└─────────────────────────────────────┘

Four areas:

Content - The actual content (text, images)
Padding - Space between content and border (inside)
Border - Line around the padding
Margin - Space outside the border (between elements)

Part 3: Content, Width, and Height

Setting Width and Height

div {
    width: 300px;
    height: 200px;
    background-color: lightblue;
}

Width Units

.pixels { width: 300px; }           / Fixed pixels /
.percentage { width: 50%; }         / Percent of parent /
.viewport { width: 50vw; }          / 50% of viewport width /
.auto { width: auto; }              / Automatic (default) /

Max and Min Width

div {
    width: 100%;
    max-width: 1200px;    / Won't grow beyond this /
    min-width: 300px;     / Won't shrink below this /
}

Perfect for responsive designs!

Part 4: Padding (Internal Spacing)

Padding creates space inside the element, between content and border.

All Sides Same

div {
    padding: 20px;  / All sides: 20px /
}

Individual Sides

div {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
}

Shorthand (2 Values)

div {
    padding: 10px 20px;
    /       top/bottom  left/right /
}

Shorthand (3 Values)

div {
    padding: 10px 20px 15px;
    /       top  left/right  bottom /
}

Shorthand (4 Values)

div {
    padding: 10px 20px 15px 25px;
    /       top  right  bottom  left /
    / Think: Clockwise from top /
}

Part 5: Border

Borders go around the padding and content.

Border Properties

div {
    border-width: 2px;
    border-style: solid;
    border-color: black;
}

Border Shorthand

div {
    border: 2px solid black;
    /      width style color /
}

Border Styles

.solid { border: 2px solid black; }
.dashed { border: 2px dashed black; }
.dotted { border: 2px dotted black; }
.double { border: 4px double black; }
.groove { border: 4px groove gray; }
.ridge { border: 4px ridge gray; }
.inset { border: 4px inset gray; }
.outset { border: 4px outset gray; }
.none { border: none; }

Individual Borders

div {
    border-top: 2px solid red;
    border-right: 3px dashed blue;
    border-bottom: 4px dotted green;
    border-left: 1px solid black;
}

Border Radius (Rounded Corners)

div {
    border: 2px solid black;
    border-radius: 10px;  / All corners /
}

.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;  / Perfect circle /
}

.custom {
    border-radius: 10px 20px 30px 40px;
    /            top-left  top-right  bottom-right  bottom-left /
}

Part 6: Margin (External Spacing)

Margin creates space outside the element, between elements.

Same syntax as padding

div {
    margin: 20px;  / All sides /
}

div {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 20px;
}

div {
    margin: 10px 20px;        / vertical horizontal /
    margin: 10px 20px 15px;   / top horizontal bottom /
    margin: 10px 20px 15px 25px;  / top right bottom left /
}

Centering with Margin

div {
    width: 600px;
    margin: 0 auto;  / Centers horizontally /
    /      vertical  horizontal /
}

Requirements for centering:

Element must have a width
Left and right margins set to auto

Negative Margins

div {
    margin-top: -20px;  / Pulls element up /
}

Use carefully - can cause overlapping!

Part 7: Box Sizing

The Default Box Model Problem

div {
    width: 300px;
    padding: 20px;
    border: 5px solid black;
}

Total width = 300 + 20 + 20 + 5 + 5 = 350px!

This can be confusing!

The Solution: box-sizing

* {
    box-sizing: border-box;
}

Now:

Width includes padding and border
300px means 300px total
Much easier to work with!

Best practice: Add this to every project:

, ::before, *::after {
    box-sizing: border-box;
}

Part 8: Display Property

Block Elements

div {
    display: block;
}

Characteristics:

Takes full width available
Starts on new line
Can set width and height
Examples: <div>, <p>, <h1>, <section>

Inline Elements

span {
    display: inline;
}

Characteristics:

Only takes up necessary width
Stays on same line
Cannot set width or height
Cannot set top/bottom margin
Examples: <span>, <a>, <strong>, <em>

Inline-Block

span {
    display: inline-block;
}

Best of both:

Stays on same line (like inline)
Can set width, height, margins (like block)
Perfect for navigation buttons!

None (Hidden)

div {
    display: none;  / Element completely hidden /
}

Part 9: Complete Example - Card Component

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Box Model Demo</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="card">
            <h2>Product Card</h2>
            <p>This is an example of the box model in action.</p>
            <button>Learn More</button>
        </div>
        
        <div class="card">
            <h2>Service Card</h2>
            <p>Notice the spacing, borders, and overall layout.</p>
            <button>Get Started</button>
        </div>
        
        <div class="card">
            <h2>Feature Card</h2>
            <p>Each card uses margin, padding, and borders.</p>
            <button>Explore</button>
        </div>
    </div>
</body>
</html>

CSS:

/ Reset and box-sizing /
, ::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    padding: 40px 20px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.card {
    / Content dimensions /
    width: 300px;
    
    / Internal spacing /
    padding: 30px;
    
    / Border /
    border: 2px solid #ddd;
    border-radius: 10px;
    
    / External spacing /
    margin: 20px;
    
    / Other styling /
    background-color: white;
    display: inline-block;
    vertical-align: top;
}

.card h2 {
    margin-bottom: 15px;
    color: #333;
    font-size: 24px;
}

.card p {
    margin-bottom: 20px;
    color: #666;
    line-height: 1.6;
}

button {
    / Display type /
    display: inline-block;
    
    / Internal spacing /
    padding: 10px 20px;
    
    / Border /
    border: 2px solid #007bff;
    border-radius: 5px;
    
    / Other styling /
    background-color: #007bff;
    color: white;
    font-size: 16px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

Part 10: Common Spacing Techniques

Consistent Spacing System

:root {
    --space-xs: 5px;
    --space-sm: 10px;
    --space-md: 20px;
    --space-lg: 40px;
    --space-xl: 80px;
}

.section {
    padding: var(--space-lg);
    margin-bottom: var(--space-xl);
}

Removing Default Margins

/ Remove default margins from specific elements /
h1, h2, h3, p {
    margin: 0;
    margin-bottom: 1rem;
}

/ Last child no bottom margin /
p:last-child {
    margin-bottom: 0;
}

Practice Exercises

Exercise 1: Box Model Visualization

Create a page with:

Three nested divs showing content, padding, border, margin
Different background colors for each layer
Labels showing each part

Exercise 2: Card Grid

Create a grid of 6 cards:

Each card: 250px wide
20px padding
2px border
15px margin between cards
Rounded corners
Use inline-block for layout

Exercise 3: Button Collection

Create 10 different button styles using:

Various padding sizes
Different border styles
Border radius variations
Hover effects

Common Mistakes

Mistake 1: Forgetting box-sizing

div {
    width: 300px;
    padding: 50px;  / Total width is now 400px! /
}

Fix:

div {
    box-sizing: border-box;
    width: 300px;
    padding: 50px;  / Total width stays 300px /
}

Mistake 2: Using Padding for Layout

/ ❌ Don't use padding to position elements /
div {
    padding-top: 100px;  / Wrong approach /
}

Fix:

/ ✅ Use margin for spacing between elements /
div {
    margin-top: 100px;
}

Mistake 3: Not Removing Default Margins

/ Browsers add default margins to h1, p, etc. /

Fix:

* {
    margin: 0;
    padding: 0;
}

What You Learned

✅ The four parts of the box model
✅ How to use padding for internal spacing
✅ How to create borders and rounded corners
✅ How to use margins for external spacing
✅ The box-sizing property
✅ Block vs inline vs inline-block display
✅ How to center elements with margin
✅ Common spacing patterns

What's Next?

In the next lesson, you'll learn about CSS Selectors - how to target specific elements precisely for styling!