🎨 Lesson 10: CSS Box Model

The Box Model is fundamental to CSS. Every element is a box with content, padding, border, and margin. Understanding it is crucial for layout and spacing.

Box Model Components

Every element consists of four layers, working from inside out:

Content: The actual content (text, images, etc.)
Padding: Space inside the border, around the content
Border: A line around the padding
Margin: Space outside the border

┌─────────────────────────────────┐
│         MARGIN                  │
│  ┌───────────────────────────┐  │
│  │     BORDER                │  │
│  │  ┌─────────────────────┐  │  │
│  │  │    PADDING          │  │  │
│  │  │  ┌───────────────┐  │  │  │
│  │  │  │     CONTENT   │  │  │  │
│  │  │  └───────────────┘  │  │  │
│  │  └─────────────────────┘  │  │
│  └───────────────────────────┘  │
└─────────────────────────────────┘
        

Content

The actual content area where text and images appear. Size controlled by width and height properties:

width: 300px;
height: 200px;

/* Use 100% to fill parent */
width: 100%;

/* Responsive sizing */
width: 80%;
max-width: 1000px;
        

Padding

Space inside the border, around the content. Creates breathing room.

/* All sides */
padding: 20px;

/* Top/Bottom, Left/Right */
padding: 10px 20px;

/* Top, Right, Bottom, Left */
padding: 10px 15px 20px 25px;

/* Individual sides */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 25px;
        

Padding Example:

This box has different padding on each side: 5px top, 10px right, 15px bottom, 20px left

Border

A line around the element. Useful for visual separation and definition.

/* Basic border */
border: 1px solid black;

/* Border parts */
border-width: 2px;
border-style: solid;    /* solid, dashed, dotted, double */
border-color: #333;

/* Individual borders */
border-top: 2px solid red;
border-right: 2px dashed blue;
border-bottom: 2px dotted green;
border-left: 2px double orange;

/* Rounded corners */
border-radius: 5px;
        

Solid red border

Dashed blue border

Dotted green border

Rounded border

Margin

Space outside the border. Creates distance between elements. Margins collapse between adjacent elements (important!).

/* All sides */
margin: 20px;

/* Top/Bottom, Left/Right */
margin: 10px 20px;

/* Top, Right, Bottom, Left */
margin: 10px 15px 20px 25px;

/* Individual sides */
margin-top: 10px;
margin-right: auto;     /* Auto-center horizontally */
margin-bottom: 15px;
margin-left: auto;

/* Shorthand centering */
margin: 0 auto;         /* Vertically no margin, horizontally centered */
        

First box

Second box (margins collapse)

Width and Height

Fixed Dimensions

width: 300px;
height: 200px;
        

Percentage-Based (Responsive)

/* Percentage of parent */
width: 50%;
height: 80%;
        

Maximum and Minimum Sizes

/* Don't grow larger than this */
max-width: 1200px;

/* Don't shrink smaller than this */
min-width: 300px;

/* Apply to height too */
max-height: 500px;
min-height: 200px;
        

Box-Sizing

Controls how width and height are calculated. Very important!

content-box (Default)

Width and height only include the content. Padding and border are added on top.

box-sizing: content-box;

/* Total width = 300 + 20 + 20 + 2 + 2 = 344px */
width: 300px;
padding: 20px;
border: 2px solid;
        

border-box (Recommended)

Width and height include content, padding, and border. Much more intuitive.

box-sizing: border-box;

/* Total width = 300px (padding and border included) */
width: 300px;
padding: 20px;
border: 2px solid;

/* Apply to all elements (best practice) */
* {
    box-sizing: border-box;
}
        

Overflow

What happens when content is larger than the box:

overflow: visible;     /* Content spills out (default) */
overflow: hidden;      /* Content is cut off */
overflow: scroll;      /* Scrollbars appear */
overflow: auto;        /* Scrollbars only if needed (recommended) */
        

overflow: hidden - Content is cut off and hidden from view. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

overflow: auto - Scrollbar appears because content overflows. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Complete Box Model Example

.box {
    /* Sizing */
    width: 300px;
    height: auto;
    box-sizing: border-box;
    
    /* Content */
    background-color: #f0f0f0;
    color: #333;
    
    /* Padding (inside) */
    padding: 20px;
    
    /* Border */
    border: 2px solid #667eea;
    border-radius: 5px;
    
    /* Margin (outside) */
    margin: 20px auto;
}
        

Box Model Debugging

Use browser DevTools to inspect and debug the box model:

Right-click an element → Inspect
Look for the "Styles" or "Inspector" tab
Find the box model diagram showing margin, border, padding, and content
Adjust values live to test changes

Key Takeaways

Every element is a box with content, padding, border, and margin
Padding is space inside the border; margin is space outside
Always use box-sizing: border-box on all elements
Use percentages for responsive designs
Margins collapse between adjacent horizontal elements
Use DevTools to inspect and debug the box model

← Back to Course | ← Previous | Next: Layouts & Positioning →