Box Model & Spacing

BEGINNER

Master the CSS box model and spacing techniques. Learn margins, padding, borders, and how browsers calculate element dimensions.

40 min

Tutorial 4 of 15

The CSS Box Model: Anatomy of an Element

Every HTML element is a rectangular box composed of four distinct areas. Understanding these areas is fundamental to mastering CSS layout and spacing.

The Four Box Model Areas:

1. Content Box

The innermost area where text and images appear.

CSS

1.content-demo {
2  width: 200px;         /* Content area width */
3  height: 100px;        /* Content area height */
4  background: #e3f2fd;  /* Visible content area */
5}

2. Padding

Transparent area around the content, inside the element.

CSS

1.padding-demo {
2  width: 200px;
3  height: 100px;
4  padding: 20px;        /* 20px padding on all sides */
5  background: #e3f2fd;  /* Background color shows through padding */
6}

3. Border

Visible line around the padding and content.

CSS

1.border-demo {
2  width: 200px;
3  height: 100px;
4  padding: 20px;
5  border: 3px solid #2196f3;  /* 3px blue border */
6  background: #e3f2fd;
7}

4. Margin

Transparent area outside the border, creating space between elements.

CSS

1.margin-demo {
2  width: 200px;
3  height: 100px;
4  padding: 20px;
5  border: 3px solid #2196f3;
6  margin: 30px;         /* 30px margin on all sides */
7  background: #e3f2fd;
8}

Total Element Size Calculation:

Without box-sizing changes, the total space an element occupies is:

Text

1Total Width = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
2
3Total Height = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

Example Calculation:

CSS

1.calculated-size {
2  width: 200px;         /* Content width */
3  height: 100px;        /* Content height */
4  padding: 20px;        /* 20px all sides = 40px total width/height */
5  border: 5px solid;    /* 5px all sides = 10px total width/height */
6  margin: 15px;         /* 15px all sides = 30px total spacing */
7}
8
9/* 
10Total occupied width: 200 + 40 + 10 + 30 = 280px
11Total occupied height: 100 + 40 + 10 + 30 = 180px
12Actual element size (visible): 200 + 40 + 10 = 250px wide, 150px tall
13*/

Box Model Visualization Tools:

Most browsers' developer tools show the box model visually:

Content: Blue
Padding: Green
Border: Yellow
Margin: Orange

Common Box Model Gotchas:

Adding padding/border increases total element size
Background colors extend through padding but not margin
Margins can collapse between adjacent elements
Percentage widths are calculated from the parent's content width

Padding: Internal Spacing Control

Padding creates internal space within an element, between the content and the border. It's essential for creating breathing room and improving readability.

Padding Property Syntax:

1. Single Value (All Sides)

CSS

1.equal-padding {
2  padding: 20px;  /* 20px on all four sides */
3}

2. Two Values (Vertical, Horizontal)

CSS

1.two-value-padding {
2  padding: 15px 25px;  /* 15px top/bottom, 25px left/right */
3}

3. Three Values (Top, Horizontal, Bottom)

CSS

1.three-value-padding {
2  padding: 10px 20px 30px;  /* 10px top, 20px left/right, 30px bottom */
3}

4. Four Values (Top, Right, Bottom, Left)

CSS

1.four-value-padding {
2  padding: 10px 15px 20px 25px;  /* Clockwise: top, right, bottom, left */
3}

Individual Side Control:

CSS

1.individual-padding {
2  padding-top: 10px;
3  padding-right: 15px;
4  padding-bottom: 20px;
5  padding-left: 25px;
6}

Padding Units and Values:

Absolute Units:

CSS

1.absolute-padding {
2  padding: 16px;        /* Pixels - most common */
3  padding: 1em;         /* Em units - relative to font size */
4  padding: 1.5rem;      /* Rem units - relative to root font size */
5  padding: 12pt;        /* Points - mainly for print */
6}

Percentage Values:

CSS

1.percentage-padding {
2  padding: 5%;          /* 5% of parent element's WIDTH (not height) */
3  padding: 10% 5%;      /* 10% top/bottom, 5% left/right */
4}

Practical Padding Examples:

1. Button Padding:

CSS

1.button {
2  padding: 12px 24px;   /* Vertical: 12px, Horizontal: 24px */
3  background: #2196f3;
4  color: white;
5  border: none;
6  border-radius: 4px;
7}

2. Card Content Padding:

CSS

1.card {
2  padding: 24px;        /* Equal padding for balanced appearance */
3  background: white;
4  border: 1px solid #e0e0e0;
5  border-radius: 8px;
6}

3. Navigation Item Padding:

CSS

1.nav-item {
2  padding: 8px 16px;    /* Compact vertical, comfortable horizontal */
3}

Padding Best Practices:

1. Consistent Spacing Scale:

CSS

1:root {
2  --space-xs: 4px;
3  --space-sm: 8px;
4  --space-md: 16px;
5  --space-lg: 24px;
6  --space-xl: 32px;
7}
8
9.component {
10  padding: var(--space-md);
11}

2. Contextual Padding:

CSS

1/* Text content needs more padding for readability */
2.text-content {
3  padding: 24px 32px;
4}
5
6/* Interactive elements need comfortable click areas */
7.clickable {
8  padding: 12px 16px;
9  min-height: 44px;     /* Accessibility guideline */
10}

3. Responsive Padding:

CSS

1.responsive-padding {
2  padding: 16px;
3}
4
5@media (max-width: 768px) {
6  .responsive-padding {
7    padding: 12px;      /* Reduce padding on small screens */
8  }
9}

Padding and Background Behavior:

Background colors and images extend through padding
Padding is included in the element's clickable area
Percentage padding is calculated from parent's WIDTH, not height
Padding cannot have negative values

Common Padding Patterns:

CSS

1/* Form inputs */
2input, textarea {
3  padding: 8px 12px;
4}
5
6/* Content containers */
7.container {
8  padding: 0 20px;     /* No vertical padding, horizontal only */
9}
10
11/* Section spacing */
12section {
13  padding: 60px 0;     /* Large vertical padding for sections */
14}

Margins: External Spacing and Positioning

Margins create space outside an element's border, pushing other elements away and controlling layout positioning. Understanding margin behavior is crucial for precise layouts.

Margin Property Syntax:

Margins follow the same syntax pattern as padding:

CSS

1.margin-examples {
2  margin: 20px;                    /* All sides */
3  margin: 10px 20px;              /* Vertical, horizontal */
4  margin: 10px 15px 20px;         /* Top, horizontal, bottom */
5  margin: 10px 15px 20px 25px;    /* Top, right, bottom, left */
6}
7
8/* Individual sides */
9.individual-margins {
10  margin-top: 20px;
11  margin-right: 15px;
12  margin-bottom: 10px;
13  margin-left: 25px;
14}

Margin Values and Units:

Positive Margins (Push Away):

CSS

1.positive-margins {
2  margin: 20px;         /* Creates 20px space around element */
3  margin-bottom: 40px;  /* Extra space below element */
4}

Negative Margins (Pull Closer):

CSS

1.negative-margins {
2  margin-top: -10px;    /* Pulls element up by 10px */
3  margin-left: -15px;   /* Pulls element left by 15px */
4}

Auto Margins (Centering):

CSS

1.centered {
2  width: 600px;
3  margin: 0 auto;       /* Centers horizontally */
4}
5
6.right-aligned {
7  width: 300px;
8  margin-left: auto;    /* Pushes to right side */
9}

Margin Collapsing:

One of the most confusing aspects of CSS margins is that they sometimes "collapse" or merge together.

Vertical Margin Collapsing:

CSS

1.first-element {
2  margin-bottom: 30px;
3}
4
5.second-element {
6  margin-top: 20px;
7}
8
9/* The space between these elements will be 30px, NOT 50px!
10   The margins collapse, and the larger margin wins. */

Rules for Margin Collapsing:

Only vertical margins collapse (not horizontal)
Only occurs between block-level elements
Doesn't happen with flexbox or grid containers
Parent and child margins can collapse
Empty elements can have their top and bottom margins collapse

Preventing Margin Collapse:

CSS

1/* Add border, padding, or overflow */
2.no-collapse {
3  padding: 1px;        /* Any padding prevents collapse */
4  border: 1px solid transparent;  /* Any border prevents collapse */
5  overflow: hidden;    /* Creates new block formatting context */
6}
7
8/* Use flexbox or grid */
9.flex-container {
10  display: flex;
11  flex-direction: column;
12  gap: 20px;          /* Use gap instead of margins */
13}

Practical Margin Applications:

1. Element Centering:

CSS

1.centered-container {
2  max-width: 1200px;
3  margin: 0 auto;      /* Classic horizontal centering */
4  padding: 0 20px;     /* Add padding for mobile spacing */
5}

2. Section Spacing:

CSS

1.section {
2  margin-bottom: 60px;  /* Space between major sections */
3}
4
5.section:last-child {
6  margin-bottom: 0;     /* Remove margin from last element */
7}

3. Typography Spacing:

CSS

1h1, h2, h3 {
2  margin-top: 0;        /* Remove default top margins */
3  margin-bottom: 1.2em; /* Use em units for scalable spacing */
4}
5
6p {
7  margin-bottom: 1em;
8}
9
10p:last-child {
11  margin-bottom: 0;     /* No margin after last paragraph */
12}

4. List and Navigation Spacing:

CSS

1.nav-list {
2  margin: 0;
3  padding: 0;
4  list-style: none;
5}
6
7.nav-item {
8  margin-right: 20px;
9}
10
11.nav-item:last-child {
12  margin-right: 0;
13}

Margin vs Padding Decision Guide:

Use padding for internal spacing within components
Use margin for spacing between components
Use padding when background should extend through the space
Use margin when you want transparent space
Use padding for clickable areas
Use margin for layout positioning

Responsive Margin Strategies:

CSS

1.responsive-margins {
2  margin: 40px 0;
3}
4
5@media (max-width: 768px) {
6  .responsive-margins {
7    margin: 24px 0;     /* Smaller margins on mobile */
8  }
9}
10
11/* Using CSS custom properties for consistency */
12:root {
13  --section-spacing: 60px;
14}
15
16@media (max-width: 768px) {
17  :root {
18    --section-spacing: 36px;
19  }
20}
21
22.section {
23  margin-bottom: var(--section-spacing);
24}

Advanced Margin Techniques:

CSS

1/* Negative margins for overlapping effects */
2.overlap {
3  margin-top: -20px;
4  position: relative;
5  z-index: 1;
6}
7
8/* Auto margins in flexbox for spacing */
9.flex-item-right {
10  margin-left: auto;   /* Pushes item to right in flex container */
11}
12
13/* Margin for responsive breakout content */
14.breakout {
15  margin-left: calc(-50vw + 50%);
16  margin-right: calc(-50vw + 50%);
17}

Box-Sizing: Controlling the Box Model

The box-sizing property fundamentally changes how browsers calculate element dimensions, solving many layout frustrations and making CSS more intuitive.

Box-Sizing Values:

1. content-box (Default)

Width and height apply only to the content area.

CSS

1.content-box {
2  box-sizing: content-box;  /* Default behavior */
3  width: 200px;
4  height: 100px;
5  padding: 20px;
6  border: 5px solid;
7}
8
9/* 
10Total element width: 200px + 40px + 10px = 250px
11Total element height: 100px + 40px + 10px = 150px
12*/

2. border-box (Recommended)

Width and height include content, padding, and border.

CSS

1.border-box {
2  box-sizing: border-box;
3  width: 200px;
4  height: 100px;
5  padding: 20px;
6  border: 5px solid;
7}
8
9/* 
10Total element width: 200px (padding and border included)
11Content area width: 200px - 40px - 10px = 150px
12*/

Universal Border-Box (Best Practice):

CSS

1/* Apply to all elements for consistent behavior */
2*, *::before, *::after {
3  box-sizing: border-box;
4}
5
6/* Alternative inheritance method */
7html {
8  box-sizing: border-box;
9}
10
11*, *::before, *::after {
12  box-sizing: inherit;
13}

Why Border-Box is Better:

1. Intuitive Sizing:

CSS

1/* With border-box, this element is exactly 300px wide */
2.predictable {
3  box-sizing: border-box;
4  width: 300px;
5  padding: 20px;
6  border: 2px solid;
7  /* Still 300px total width! */
8}

2. Easier Percentage Calculations:

CSS

1.grid-items {
2  box-sizing: border-box;
3  width: 33.333%;      /* Exactly one-third width */
4  padding: 15px;       /* Padding doesn't break the layout */
5  border: 1px solid;   /* Border doesn't break the layout */
6}

3. Responsive Design Friendly:

CSS

1.responsive-card {
2  box-sizing: border-box;
3  width: 100%;
4  max-width: 400px;
5  padding: 24px;       /* Internal spacing */
6  border: 1px solid #ddd;
7  /* Total width never exceeds container */
8}

Practical Box-Sizing Examples:

1. Form Elements:

CSS

1input, textarea, select {
2  box-sizing: border-box;
3  width: 100%;         /* Fits container exactly */
4  padding: 8px 12px;
5  border: 1px solid #ccc;
6}

2. Grid Systems:

CSS

1.column {
2  box-sizing: border-box;
3  float: left;
4  padding: 0 15px;     /* Gutter spacing */
5}
6
7.col-1 { width: 8.333%; }
8.col-2 { width: 16.666%; }
9.col-3 { width: 25%; }
10/* Padding doesn't break the grid! */

3. Card Layouts:

CSS

1.card {
2  box-sizing: border-box;
3  width: 100%;
4  padding: 20px;
5  border: 1px solid #e0e0e0;
6  border-radius: 8px;
7  background: white;
8}

Box-Sizing with Different Units:

Absolute Units:

CSS

1.absolute-sizing {
2  box-sizing: border-box;
3  width: 300px;        /* Fixed pixel width */
4  padding: 20px;       /* Included in 300px */
5}

Relative Units:

CSS

1.relative-sizing {
2  box-sizing: border-box;
3  width: 50%;          /* 50% of parent */
4  padding: 5%;         /* 5% of parent width */
5}

Viewport Units:

CSS

1.viewport-sizing {
2  box-sizing: border-box;
3  width: 100vw;        /* Full viewport width */
4  padding: 2vw;        /* Viewport-relative padding */
5}

Box-Sizing Browser Compatibility:

Border-box is supported in all modern browsers. For older browsers:

CSS

1/* Legacy browser support (IE 8+) */
2.legacy-support {
3  -webkit-box-sizing: border-box;
4  -moz-box-sizing: border-box;
5  box-sizing: border-box;
6}

Common Box-Sizing Patterns:

1. Full-Width Form Elements:

CSS

1.form-field {
2  box-sizing: border-box;
3  width: 100%;
4  margin-bottom: 1rem;
5  padding: 0.75rem;
6  border: 1px solid #ccc;
7  border-radius: 4px;
8}

2. Flexible Button Sizing:

CSS

1.button {
2  box-sizing: border-box;
3  padding: 0.5rem 1rem;
4  border: 2px solid #007bff;
5  background: #007bff;
6  color: white;
7  /* Total size includes border and padding */
8}

3. Responsive Container:

CSS

1.container {
2  box-sizing: border-box;
3  max-width: 1200px;
4  margin: 0 auto;
5  padding: 0 2rem;     /* Safe area padding */
6  width: 100%;         /* Full width up to max-width */
7}

Debugging Box Model Issues:

CSS

1/* Temporary border trick to visualize boxes */
2.debug * {
3  border: 1px solid red;
4}
5
6/* Modern approach using outline (doesn't affect layout) */
7.debug * {
8  outline: 1px solid red;
9}

Box-Sizing Best Practices:

Use border-box universally for predictable layouts
Apply it early in your CSS reset/normalize
Document any components that need content-box
Use browser dev tools to visualize the box model
Consider box-sizing when converting designs to code

CSS Box Model & Spacing - Interactive Layout System

A comprehensive demonstration of the CSS box model, margins, padding, borders, and box-sizing with visual examples and practical applications.

Example CodeHTML

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Box Model & Spacing - Complete Guide</title>
7    <style>
8        /* =================
9           UNIVERSAL BOX-SIZING
10           ================= */
11        *, *::before, *::after {
12            box-sizing: border-box;
13        }
14
15        /* =================
16           BASE STYLES
17           ================= */
18        body {
19            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
20            line-height: 1.6;
21            color: #333;
22            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
23            margin: 0;
24            padding: 20px;
25            min-height: 100vh;
26        }
27
28        /* =================
29           SPACING SYSTEM
30           ================= */
31        :root {
32            --space-xs: 4px;
33            --space-sm: 8px;
34            --space-md: 16px;
35            --space-lg: 24px;
36            --space-xl: 32px;
37            --space-2xl: 48px;
38            --space-3xl: 64px;
39        }
40
41        /* =================
42           LAYOUT CONTAINER
43           ================= */
44        .container {
45            max-width: 1400px;
46            margin: 0 auto;
47            background: rgba(255, 255, 255, 0.95);
48            border-radius: 20px;
49            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
50            overflow: hidden;
51        }
52
53        /* =================
54           HEADER SECTION
55           ================= */
56        .header {
57            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
58            color: white;
59            text-align: center;
60            padding: var(--space-3xl) var(--space-lg);
61            margin: 0; /* No margin inside container */
62        }
63
64        .header h1 {
65            font-size: 3rem;
66            margin: 0 0 var(--space-md) 0;
67            font-weight: 700;
68            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
69        }
70
71        .header p {
72            font-size: 1.2rem;
73            margin: 0;
74            opacity: 0.9;
75        }
76
77        /* =================
78           MAIN CONTENT AREA
79           ================= */
80        .main-content {
81            padding: var(--space-2xl);
82        }
83
84        .section {
85            background: white;
86            margin-bottom: var(--space-2xl);
87            border-radius: 16px;
88            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
89            overflow: hidden;
90        }
91
92        .section:last-child {
93            margin-bottom: 0; /* Remove margin from last section */
94        }
95
96        .section-header {
97            background: #f8fafc;
98            padding: var(--space-lg) var(--space-xl);
99            margin: 0;
100            border-bottom: 1px solid #e2e8f0;
101        }
102
103        .section-header h2 {
104            color: #1e293b;
105            font-size: 1.8rem;
106            margin: 0;
107            font-weight: 600;
108        }
109
110        .section-content {
111            padding: var(--space-xl);
112        }
113
114        /* =================
115           BOX MODEL VISUALIZATION
116           ================= */
117        .box-model-demo {
118            display: flex;
119            gap: var(--space-xl);
120            flex-wrap: wrap;
121            justify-content: center;
122            margin: var(--space-lg) 0;
123        }
124
125        .box-demo {
126            position: relative;
127            background: #e3f2fd;
128            border: 4px solid #2196f3;
129            font-weight: bold;
130            text-align: center;
131            display: flex;
132            align-items: center;
133            justify-content: center;
134            color: #0d47a1;
135            border-radius: 8px;
136            transition: all 0.3s ease;
137        }
138
139        .box-demo:hover {
140            transform: scale(1.05);
141            box-shadow: 0 8px 25px rgba(33, 150, 243, 0.3);
142        }
143
144        .content-box-demo {
145            width: 120px;
146            height: 80px;
147            padding: 20px;
148            margin: 15px;
149        }
150
151        .border-box-demo {
152            box-sizing: border-box;
153            width: 200px;
154            height: 120px;
155            padding: 20px;
156            margin: 15px;
157        }
158
159        /* =================
160           PADDING EXAMPLES
161           ================= */
162        .padding-grid {
163            display: grid;
164            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
165            gap: var(--space-lg);
166            margin: var(--space-lg) 0;
167        }
168
169        .padding-example {
170            background: linear-gradient(45deg, #ffeaa7, #fab1a0);
171            border: 2px solid #e17055;
172            border-radius: 12px;
173            text-align: center;
174            font-weight: 600;
175            color: #2d3436;
176            transition: transform 0.2s ease;
177        }
178
179        .padding-example:hover {
180            transform: translateY(-4px);
181        }
182
183        .padding-equal { padding: var(--space-lg); }
184        .padding-vertical { padding: var(--space-xl) var(--space-md); }
185        .padding-custom { padding: var(--space-sm) var(--space-lg) var(--space-xl) var(--space-md); }
186        .padding-sides {
187            padding-top: var(--space-xs);
188            padding-right: var(--space-md);
189            padding-bottom: var(--space-lg);
190            padding-left: var(--space-xl);
191        }
192
193        /* =================
194           MARGIN EXAMPLES
195           ================= */
196        .margin-demo-container {
197            background: #f1f5f9;
198            padding: var(--space-lg);
199            border-radius: 12px;
200            border: 2px dashed #94a3b8;
201        }
202
203        .margin-example {
204            background: #06d6a0;
205            color: white;
206            font-weight: bold;
207            text-align: center;
208            padding: var(--space-md);
209            border-radius: 8px;
210            border: 2px solid #048a5d;
211        }
212
213        .margin-auto {
214            width: 60%;
215            margin: 0 auto var(--space-lg);
216        }
217
218        .margin-sides {
219            margin: var(--space-lg) var(--space-xl);
220        }
221
222        .margin-individual {
223            margin-top: var(--space-xs);
224            margin-right: var(--space-sm);
225            margin-bottom: var(--space-md);
226            margin-left: var(--space-lg);
227        }
228
229        /* =================
230           MARGIN COLLAPSE DEMO
231           ================= */
232        .collapse-container {
233            background: #fef3c7;
234            border: 2px solid #f59e0b;
235            border-radius: 12px;
236            padding: var(--space-md);
237        }
238
239        .collapse-example {
240            background: #fbbf24;
241            color: #92400e;
242            font-weight: bold;
243            text-align: center;
244            padding: var(--space-md);
245            border-radius: 8px;
246        }
247
248        .first-collapse {
249            margin-bottom: 30px;
250        }
251
252        .second-collapse {
253            margin-top: 20px;
254        }
255
256        .no-collapse {
257            border: 1px solid transparent;
258        }
259
260        /* =================
261           PRACTICAL EXAMPLES
262           ================= */
263        .card-grid {
264            display: grid;
265            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
266            gap: var(--space-xl);
267            margin: var(--space-lg) 0;
268        }
269
270        .card {
271            background: white;
272            border: 1px solid #e2e8f0;
273            border-radius: 12px;
274            padding: var(--space-xl);
275            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
276            transition: all 0.3s ease;
277        }
278
279        .card:hover {
280            transform: translateY(-8px);
281            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
282        }
283
284        .card h3 {
285            color: #1e293b;
286            font-size: 1.25rem;
287            font-weight: 600;
288            margin: 0 0 var(--space-md) 0;
289        }
290
291        .card p {
292            color: #64748b;
293            margin: 0 0 var(--space-lg) 0;
294            line-height: 1.6;
295        }
296
297        .card-button {
298            background: #3b82f6;
299            color: white;
300            border: none;
301            padding: var(--space-sm) var(--space-lg);
302            border-radius: 8px;
303            font-weight: 600;
304            cursor: pointer;
305            transition: background 0.2s ease;
306            margin: 0;
307        }
308
309        .card-button:hover {
310            background: #2563eb;
311        }
312
313        /* =================
314           FORM EXAMPLES
315           ================= */
316        .form-example {
317            background: #f8fafc;
318            padding: var(--space-xl);
319            border-radius: 12px;
320            border: 1px solid #e2e8f0;
321        }
322
323        .form-group {
324            margin-bottom: var(--space-lg);
325        }
326
327        .form-group:last-child {
328            margin-bottom: 0;
329        }
330
331        .form-group label {
332            display: block;
333            color: #374151;
334            font-weight: 600;
335            margin-bottom: var(--space-sm);
336        }
337
338        .form-group input,
339        .form-group textarea {
340            width: 100%;
341            padding: var(--space-md);
342            border: 2px solid #d1d5db;
343            border-radius: 8px;
344            font-size: 1rem;
345            transition: border-color 0.2s ease;
346            margin: 0;
347        }
348
349        .form-group input:focus,
350        .form-group textarea:focus {
351            outline: none;
352            border-color: #3b82f6;
353            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
354        }
355
356        /* =================
357           BUTTON EXAMPLES
358           ================= */
359        .button-showcase {
360            display: flex;
361            gap: var(--space-md);
362            flex-wrap: wrap;
363            justify-content: center;
364            align-items: center;
365            margin: var(--space-lg) 0;
366        }
367
368        .btn {
369            border: none;
370            border-radius: 8px;
371            font-weight: 600;
372            cursor: pointer;
373            transition: all 0.2s ease;
374            text-decoration: none;
375            display: inline-block;
376            text-align: center;
377        }
378
379        .btn-sm {
380            padding: var(--space-sm) var(--space-md);
381            font-size: 0.875rem;
382        }
383
384        .btn-md {
385            padding: var(--space-md) var(--space-lg);
386            font-size: 1rem;
387        }
388
389        .btn-lg {
390            padding: var(--space-lg) var(--space-xl);
391            font-size: 1.125rem;
392        }
393
394        .btn-primary {
395            background: #3b82f6;
396            color: white;
397        }
398
399        .btn-primary:hover {
400            background: #2563eb;
401            transform: translateY(-2px);
402            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
403        }
404
405        .btn-secondary {
406            background: #6b7280;
407            color: white;
408        }
409
410        .btn-secondary:hover {
411            background: #4b5563;
412        }
413
414        .btn-outline {
415            background: transparent;
416            border: 2px solid #3b82f6;
417            color: #3b82f6;
418        }
419
420        .btn-outline:hover {
421            background: #3b82f6;
422            color: white;
423        }
424
425        /* =================
426           MEASUREMENT DISPLAY
427           ================= */
428        .measurement {
429            position: relative;
430            display: inline-block;
431            background: rgba(59, 130, 246, 0.1);
432            border: 2px solid #3b82f6;
433            margin: var(--space-md);
434            border-radius: 8px;
435        }
436
437        .measurement-content {
438            background: #3b82f6;
439            color: white;
440            padding: var(--space-lg);
441            font-weight: bold;
442            text-align: center;
443            border-radius: 4px;
444        }
445
446        .measurement-label {
447            position: absolute;
448            background: #1e40af;
449            color: white;
450            padding: var(--space-xs) var(--space-sm);
451            border-radius: 4px;
452            font-size: 0.75rem;
453            font-weight: bold;
454            white-space: nowrap;
455        }
456
457        .label-margin {
458            top: -12px;
459            left: -8px;
460        }
461
462        .label-border {
463            top: -12px;
464            right: -8px;
465        }
466
467        .label-padding {
468            bottom: -12px;
469            left: 50%;
470            transform: translateX(-50%);
471        }
472
473        /* =================
474           RESPONSIVE DESIGN
475           ================= */
476        @media (max-width: 768px) {
477            body {
478                padding: 10px;
479            }
480
481            .main-content {
482                padding: var(--space-lg);
483            }
484
485            .section-content {
486                padding: var(--space-lg);
487            }
488
489            .header h1 {
490                font-size: 2rem;
491            }
492
493            .box-model-demo {
494                flex-direction: column;
495                align-items: center;
496            }
497
498            .button-showcase {
499                flex-direction: column;
500                align-items: stretch;
501            }
502
503            .card-grid {
504                grid-template-columns: 1fr;
505            }
506        }
507
508        /* =================
509           UTILITY CLASSES
510           ================= */
511        .text-center { text-align: center; }
512        .text-sm { font-size: 0.875rem; }
513        .text-lg { font-size: 1.125rem; }
514        .font-bold { font-weight: bold; }
515        .opacity-75 { opacity: 0.75; }
516
517        /* =================
518           CODE STYLING
519           ================= */
520        code {
521            background: #f1f5f9;
522            color: #e11d48;
523            padding: 2px 6px;
524            border-radius: 4px;
525            font-family: 'Courier New', monospace;
526            font-size: 0.9em;
527        }
528
529        .code-block {
530            background: #1e293b;
531            color: #e2e8f0;
532            padding: var(--space-lg);
533            border-radius: 8px;
534            font-family: 'Courier New', monospace;
535            font-size: 0.9rem;
536            overflow-x: auto;
537            margin: var(--space-md) 0;
538        }
539    </style>
540</head>
541<body>
542    <div class="container">
543        <!-- Header -->
544        <header class="header">
545            <h1>📦 CSS Box Model & Spacing</h1>
546            <p>Master margins, padding, borders, and the foundation of all CSS layouts</p>
547        </header>
548
549        <main class="main-content">
550            <!-- Box Model Visualization -->
551            <section class="section">
552                <div class="section-header">
553                    <h2>🔍 Box Model Visualization</h2>
554                </div>
555                <div class="section-content">
556                    <p class="text-lg">Every element is composed of four areas: content, padding, border, and margin.</p>
557                    
558                    <div class="box-model-demo">
559                        <div class="measurement">
560                            <div class="measurement-label label-margin">Margin: 15px</div>
561                            <div class="measurement-label label-border">Border: 4px</div>
562                            <div class="measurement-label label-padding">Padding: 20px</div>
563                            <div class="measurement-content">
564                                Content Area<br>
565                                120px × 80px
566                            </div>
567                        </div>
568                    </div>
569
570                    <div class="text-center">
571                        <h3>Content-Box vs Border-Box</h3>
572                        <div class="box-model-demo">
573                            <div class="box-demo content-box-demo">
574                                <div>
575                                    Content-Box<br>
576                                    <span class="text-sm opacity-75">Total: 168px × 128px</span>
577                                </div>
578                            </div>
579                            <div class="box-demo border-box-demo">
580                                <div>
581                                    Border-Box<br>
582                                    <span class="text-sm opacity-75">Total: 200px × 120px</span>
583                                </div>
584                            </div>
585                        </div>
586                    </div>
587                </div>
588            </section>
589
590            <!-- Padding Examples -->
591            <section class="section">
592                <div class="section-header">
593                    <h2>📏 Padding: Internal Spacing</h2>
594                </div>
595                <div class="section-content">
596                    <p>Padding creates internal space within elements. It affects the element's clickable area and extends the background color.</p>
597                    
598                    <div class="padding-grid">
599                        <div class="padding-example padding-equal">
600                            <div>Equal Padding</div>
601                            <code>padding: 24px;</code>
602                        </div>
603                        <div class="padding-example padding-vertical">
604                            <div>Vertical/Horizontal</div>
605                            <code>padding: 32px 16px;</code>
606                        </div>
607                        <div class="padding-example padding-custom">
608                            <div>Four Values</div>
609                            <code>padding: 8px 24px 32px 16px;</code>
610                        </div>
611                        <div class="padding-example padding-sides">
612                            <div>Individual Sides</div>
613                            <code>padding-left: 32px;</code>
614                        </div>
615                    </div>
616
617                    <div class="form-example">
618                        <h4>Practical Example: Form Elements</h4>
619                        <div class="form-group">
620                            <label for="demo-input">Input with padding: 16px</label>
621                            <input type="text" id="demo-input" placeholder="Notice the comfortable padding">
622                        </div>
623                        <div class="form-group">
624                            <label for="demo-textarea">Textarea with consistent padding</label>
625                            <textarea id="demo-textarea" rows="3" placeholder="Padding makes text inputs more comfortable to use"></textarea>
626                        </div>
627                    </div>
628                </div>
629            </section>
630
631            <!-- Margin Examples -->
632            <section class="section">
633                <div class="section-header">
634                    <h2>🌌 Margins: External Spacing</h2>
635                </div>
636                <div class="section-content">
637                    <p>Margins create space outside elements, pushing other elements away and controlling layout positioning.</p>
638                    
639                    <div class="margin-demo-container">
640                        <div class="margin-example margin-auto">
641                            Centered with margin: 0 auto
642                        </div>
643                        <div class="margin-example margin-sides">
644                            Side margins: 24px 32px
645                        </div>
646                        <div class="margin-example margin-individual">
647                            Individual margins (asymmetric)
648                        </div>
649                    </div>
650
651                    <h4>Margin Collapsing Demonstration</h4>
652                    <div class="collapse-container">
653                        <div class="collapse-example first-collapse">
654                            First element (margin-bottom: 30px)
655                        </div>
656                        <div class="collapse-example second-collapse">
657                            Second element (margin-top: 20px)
658                            <br><small>Actual space between: 30px (margins collapsed!)</small>
659                        </div>
660                        <div class="collapse-example no-collapse" style="margin-top: 20px;">
661                            This element has border: 1px solid transparent
662                            <br><small>Prevents margin collapse</small>
663                        </div>
664                    </div>
665                </div>
666            </section>
667
668            <!-- Button Sizing Examples -->
669            <section class="section">
670                <div class="section-header">
671                    <h2>🎯 Practical Applications</h2>
672                </div>
673                <div class="section-content">
674                    <h4>Button Padding Variations</h4>
675                    <div class="button-showcase">
676                        <button class="btn btn-sm btn-primary">Small Button</button>
677                        <button class="btn btn-md btn-primary">Medium Button</button>
678                        <button class="btn btn-lg btn-primary">Large Button</button>
679                        <button class="btn btn-md btn-secondary">Secondary</button>
680                        <button class="btn btn-md btn-outline">Outline</button>
681                    </div>
682
683                    <h4>Card Layout with Proper Spacing</h4>
684                    <div class="card-grid">
685                        <div class="card">
686                            <h3>Content Card</h3>
687                            <p>This card uses consistent padding (32px) and margin-bottom for proper spacing between content elements.</p>
688                            <button class="card-button">Learn More</button>
689                        </div>
690                        <div class="card">
691                            <h3>Responsive Design</h3>
692                            <p>Box-sizing: border-box ensures predictable sizing even with padding and borders added.</p>
693                            <button class="card-button">Explore</button>
694                        </div>
695                        <div class="card">
696                            <h3>Accessibility</h3>
697                            <p>Adequate padding creates comfortable click targets and improves user experience on all devices.</p>
698                            <button class="card-button">Discover</button>
699                        </div>
700                    </div>
701                </div>
702            </section>
703
704            <!-- Best Practices -->
705            <section class="section">
706                <div class="section-header">
707                    <h2>✨ Best Practices & Tips</h2>
708                </div>
709                <div class="section-content">
710                    <div style="display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
711                        <div style="background: #f0f9ff; padding: 24px; border-radius: 12px; border-left: 4px solid #0ea5e9;">
712                            <h4 style="color: #0369a1; margin: 0 0 16px 0;">Universal Border-Box</h4>
713                            <div class="code-block">*, *::before, *::after {
714  box-sizing: border-box;
715}</div>
716                            <p style="margin: 16px 0 0 0; color: #64748b;">Makes CSS sizing intuitive and predictable</p>
717                        </div>
718
719                        <div style="background: #f0fdf4; padding: 24px; border-radius: 12px; border-left: 4px solid #22c55e;">
720                            <h4 style="color: #15803d; margin: 0 0 16px 0;">Consistent Spacing Scale</h4>
721                            <div class="code-block">:root {
722  --space-sm: 8px;
723  --space-md: 16px;
724  --space-lg: 24px;
725}</div>
726                            <p style="margin: 16px 0 0 0; color: #64748b;">Use CSS custom properties for systematic spacing</p>
727                        </div>
728
729                        <div style="background: #fefce8; padding: 24px; border-radius: 12px; border-left: 4px solid #eab308;">
730                            <h4 style="color: #a16207; margin: 0 0 16px 0;">Remove Default Margins</h4>
731                            <div class="code-block">h1, h2, h3, p {
732  margin-top: 0;
733}</div>
734                            <p style="margin: 16px 0 0 0; color: #64748b;">Control spacing explicitly rather than relying on defaults</p>
735                        </div>
736
737                        <div style="background: #fdf2f8; padding: 24px; border-radius: 12px; border-left: 4px solid #ec4899;">
738                            <h4 style="color: #be185d; margin: 0 0 16px 0;">Responsive Spacing</h4>
739                            <div class="code-block">@media (max-width: 768px) {
740  .container {
741    padding: 16px;
742  }
743}</div>
744                            <p style="margin: 16px 0 0 0; color: #64748b;">Adjust spacing for different screen sizes</p>
745                        </div>
746                    </div>
747                </div>
748            </section>
749
750            <!-- Interactive Summary -->
751            <section class="section">
752                <div class="section-header">
753                    <h2>🎉 Box Model Mastery Achieved!</h2>
754                </div>
755                <div class="section-content text-center">
756                    <p class="text-lg">You've mastered the foundation of all CSS layouts!</p>
757                    
758                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 32px 0; text-align: center;">
759                        <div style="padding: 16px; background: #dbeafe; border-radius: 12px; color: #1e40af;">
760                            <div class="font-bold">✅ Box Model</div>
761                            <div class="text-sm">Content, Padding, Border, Margin</div>
762                        </div>
763                        <div style="padding: 16px; background: #dcfce7; border-radius: 12px; color: #166534;">
764                            <div class="font-bold">✅ Spacing Control</div>
765                            <div class="text-sm">Margins & Padding Mastery</div>
766                        </div>
767                        <div style="padding: 16px; background: #fef3c7; border-radius: 12px; color: #92400e;">
768                            <div class="font-bold">✅ Box-Sizing</div>
769                            <div class="text-sm">Predictable Element Sizing</div>
770                        </div>
771                        <div style="padding: 16px; background: #fce7f3; border-radius: 12px; color: #be185d;">
772                            <div class="font-bold">✅ Best Practices</div>
773                            <div class="text-sm">Professional Layout Techniques</div>
774                        </div>
775                    </div>
776
777                    <p style="color: #64748b; margin: 24px 0;">Next up: Backgrounds & Borders - where you'll learn to enhance elements with colors, images, and decorative borders!</p>
778                </div>
779            </section>
780        </main>
781    </div>
782</body>
783</html>

How It Works

This comprehensive demonstration covers all aspects of CSS Box Model & Spacing from Lesson 4:

📦 Complete Box Model Implementation:

1. Box Model Visualization:

Interactive demonstration of content, padding, border, and margin areas
Visual measurements showing actual pixel dimensions
Content-box vs border-box comparison with real size calculations
Color-coded sections matching browser developer tools

2. Box-Sizing Mastery:

Universal border-box implementation with *, *::before, *::after
Demonstrates predictable sizing with border-box vs content-box
Shows why border-box is recommended for modern development
Form elements and responsive containers using border-box

3. Spacing System Implementation:

CSS custom properties for consistent spacing scale
Systematic approach from --space-xs (4px) to --space-3xl (64px)
Demonstrates scalable and maintainable spacing patterns
Mobile-responsive spacing adjustments

📏 Comprehensive Padding Examples:

1. Padding Syntax Variations:

Equal padding on all sides
Vertical/horizontal shorthand notation
Four-value syntax (top, right, bottom, left)
Individual side properties with visual differences

2. Practical Padding Applications:

Form inputs with comfortable padding for usability
Button padding variations (small, medium, large)
Card content with professional spacing
Interactive elements with adequate touch targets

3. Padding Visual Effects:

Background color extension through padding areas
Hover effects that demonstrate clickable areas
Accessibility considerations for touch interfaces

🌌 Margin Mastery Demonstrations:

1. Margin Techniques:

Auto margins for horizontal centering
Asymmetric margins for visual hierarchy
Individual margin properties for precise control
Negative margins for advanced positioning effects

2. Margin Collapsing Visualization:

Clear demonstration of vertical margin collapse
Side-by-side comparison of collapsed vs non-collapsed margins
Techniques to prevent unwanted margin collapse
Practical examples of when collapse is beneficial vs problematic

3. Layout Applications:

Container centering with max-width and auto margins
Section spacing with consistent bottom margins
Last-child margin removal to prevent excess spacing
Responsive margin adjustments for different screen sizes

🎯 Real-World Applications:

1. Professional Card Layouts:

Consistent internal padding for content comfort
Proper margin spacing between card elements
Hover effects showing box-shadow and transform
Grid layout with gap property for modern spacing

2. Form Design Patterns:

Full-width inputs with box-sizing: border-box
Comfortable padding for text input areas
Proper margin spacing between form groups
Focus states with outline spacing

3. Button Design System:

Size variations using padding (small, medium, large)
Consistent border-radius and spacing
Hover effects with transform and box-shadow
Accessibility-compliant touch targets (minimum 44px height)

✨ Best Practices Implementation:

1. CSS Architecture:

Universal box-sizing for predictable layouts
CSS custom properties for maintainable spacing
Systematic approach to margin and padding values
Mobile-first responsive design patterns

2. Performance Considerations:

Efficient CSS selectors for box model properties
Hardware-accelerated transforms for animations
Optimal use of box-shadow vs border for visual effects
Minimal reflow/repaint with proper spacing techniques

3. Accessibility Features:

Adequate spacing for comfortable reading
Touch-friendly interactive elements
Color contrast maintained across all spacing examples
Keyboard navigation support with focus indicators

📱 Responsive Design Integration:

1. Mobile Optimization:

Reduced spacing on smaller screens
Flexible grid layouts that adapt to screen width
Touch-optimized button and input sizing
Proper viewport handling with meta tag

2. Progressive Enhancement:

Fallbacks for older browsers
Feature detection for modern CSS properties
Graceful degradation of visual effects
Performance optimization for mobile devices

This demonstration serves as a comprehensive reference for CSS box model concepts, showing both the theoretical understanding and practical application of margins, padding, borders, and box-sizing in real-world web development scenarios.

CSS

Box Model & Spacing

Learning Objectives

Introduction

The CSS Box Model: Anatomy of an Element

Padding: Internal Spacing Control

Margins: External Spacing and Positioning

Box-Sizing: Controlling the Box Model

CSS Box Model & Spacing - Interactive Layout System

How It Works

Key Takeaways

What's Next?

Table of Contents