BitWithBite
Full-Stack Worksheet
📦 Box Model
SCORE___ / 20
NameClassDate
After this worksheet you can
Name the four box layersCalculate rendered widthApply box-sizing:border-boxDebug layout overflow📚 Quick Recap
🎯 What you'll practice: Content, padding, border, margin, and the border-box fix.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1Order from inside out:
2Space between two sibling elements is controlled by:
3box-sizing: border-box makes width include:
4Default box-sizing value is:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5width:100px + padding:10px + border:2px (content-box) renders at px total width.
6The universal selector used to apply border-box to everything is .
7Calculate the rendered width: width:200px, padding:15px each side, border:5px each side, box-sizing:content-box.
8Now calculate the same box with box-sizing:border-box.
9Why do developers apply border-box globally at the top of nearly every stylesheet?
🚀 Section C · Challenge ● CHALLENGE 5
10A 3-column layout with width:33.33% each overflows and wraps to a 4th line once you add padding. Explain why, and give the one-line CSS fix.
💭 Reflection — the most useful thing I learned:
A ___/4 B ___/11 C ___/5 Total ___/20
Teacher's Signature
Parent's Signature
✂ answer key — fold or cut before handing out
1-B 2-C 3-B 4-B | 5 = 124 (100+10+10+2+2) 6 = * 7 = 200 + 15+15 + 5+5 = 240px 8 = 200px (padding and border are subtracted from content area instead of added) 9 = Because content-box (the default) makes width math unpredictable once padding/border are added — border-box lets a declared width stay the actual rendered width, matching how most designers think about sizing | 10 = With content-box, each column's padding adds extra width on top of the 33.33%, pushing total width over 100% and wrapping the last column; fix: add * { box-sizing: border-box; }.